Restrict components to only use specified rendition size for images.

[askdctm]

Hi All,

Is there a way that we can restrict the components to use images with a specified rendition size [like 2:1 only or 3:1 only].

Any thoughts/reference articles on this will be helpful.

[edubey]

You are referring to html5smartimage where we drag n drop OR select image via pathfield?

[askdctm]

Hi Praveen,

Looks like in our case ,most of the components are using "pathfield" way. Also, how should this be handled in case of html5smartimage .

[edubey]

Sometime back, I wrote a similar kind of article [1].

You  implement a simple listener on beforeSubmit of dialog. In listener check the value of renditions used in image name. 

[1] http://adobeaemclub.com/simple-way-to-restrict-image-type-in-pathfield-xtype/

[kautuk_sahni]

Hi

Please have a look at this community article,

Link:- http://experience-aem.blogspot.in/2013/09/cq-image-custom-aspect-ratios-crop.html

//HTML 5 Smart Image Component Custom Aspect Ratios

Create a html 5 smart image component that supports custom aspect ratios, image cropping. An author can create images of different aspect ratios using the same image component. Before you proceed, the process explained here is not Adobe suggested approach, it's just a thought; Package install, Source code and Video demonstration are available for download..

I hope this will help you.

Thanks and Regards

Kautuk Sahni

[kautuk_sahni]

Hi

Also see this forum post, maybe this could also help you.

Link: http://unityprod-elbunity-1wnqxiwpjnn7g-1363695545.us-east-1.elb.amazonaws.com/content/adobeforums/e...

Thanks and Regards

Kautuk Sahni

[askdctm]

Hi Kautuk/Praveen,

Thank you for your reply. Will check on this and post back my results/queries.

[askdctm]

Hi Kautuk/Praveen,

As per the latest changes in our scenario, we have to make use of drag and drop feature, wherein component has two place holders for images. One should consume only 2: 1 rendition image and the other only 1:1 image.

Did go through the articles mentioned, but they seem to be bit different though related.

So, the option left with us now is to 

a]  "implement a simple listener on beforeSubmit of dialog. In listener check the value of renditions used in image name" as mentioned by Praveen?

Also, any further references/pointers on this will be helpful.

[edubey]

Check this http://stackoverflow.com/questions/22478787/use-before-submit-event-of-cq5-dialog

You can see how to add beforesubmit to dialog

Let me know if you face any issue

[yan-kisen · Accepted solution]

I've achieved the same thing using a different approach.

Instead of uploading each rendition as a separate DAM asset, we instructed our authors to upload renditions directly to the primary asset (full resolution)[img]https://docs.adobe.com/content/docs/en/cq/5-6-1/dam/how_to_edit_metadata/_jcr_content/par/procedure/...

For this to work it's important to define and instruct a specific naming convention. We used a suffix to the filename (ex: rendition_hero.png, rendition_thumbnail.png)

We then created a custom image component which would select the appropriate rendition based on the Sling suffix.

ex: /content/website/en/home/_jcr_content/image.transform.jpg/hero/img.png

The ACS AEM Commons "Named Transform Image Servlet" is a great place to see how this works. I ended up creating an additional transformer to grab the specified rendition if it exists, or crop/resize the original asset to the appropriate size for the component.

Finally we added a dropdown to the design dialog for relevant components where authors could select which rendition type should be displayed.

It sounds like the only thing missing from your requirement is a custom validation to verify that the Asset actually has the appropriate rendition.

[askdctm]

Hi Yan,

Thanks a lot for your reply. 

Will check on this and post back query/results in couple of days.