Restrict components to only use specified rendition size for images. | Community
Skip to main content
New Participant
March 10, 2016
Solved

Restrict components to only use specified rendition size for images.

  • March 10, 2016
  • 10 replies
  • 2372 views

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.

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by yan-kisen

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/proc_par/step/step_par/image.img.png/1341321293000.png[/img]

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.

10 replies

askdctmAuthor
New Participant
March 15, 2016

Hi Yan,

Thanks a lot for your reply. 

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

yan-kisen
yan-kisenAccepted solution
New Participant
March 12, 2016

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/proc_par/step/step_par/image.img.png/1341321293000.png[/img]

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.

edubey
New Participant
March 11, 2016

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

askdctmAuthor
New Participant
March 11, 2016

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.

askdctmAuthor
New Participant
March 10, 2016

Hi Kautuk/Praveen,

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

kautuk_sahni
Employee
March 10, 2016
kautuk_sahni
Employee
March 10, 2016

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
edubey
New Participant
March 10, 2016

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/

askdctmAuthor
New Participant
March 10, 2016

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
New Participant
March 10, 2016

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