Restrict components to only use specified rendition size for images. | Community
Skip to main content
A
askdctm
Level 9
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

edubey
edubey
Level 10
March 10, 2016

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

A
askdctmAuthor
Level 9
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
edubey
Level 10
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/

kautuk_sahni
Community Manager
kautuk_sahniCommunity Manager
Community Manager
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
kautuk_sahni
Community Manager
kautuk_sahniCommunity Manager
Community Manager
March 10, 2016

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/en/experience-manager-forum/adobe-experience-manager.topic.36.html/forum__swwv-hi_we_have_areq.html

Thanks and Regards

Kautuk Sahni

Kautuk Sahni
A
askdctmAuthor
Level 9
March 10, 2016

Hi Kautuk/Praveen,

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

A
askdctmAuthor
Level 9
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.

edubey
edubey
Level 10
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

yan-kisen
yan-kisenAccepted solution
Level 2
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.

A
askdctmAuthor
Level 9
March 15, 2016

Hi Yan,

Thanks a lot for your reply. 

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

Terms & ConditionsAccessibility statement

Loading footer...