1

I know that while uploading any Image/Asset into AEM DAM will create the renditions, but am wondering that how these renditions are going to be used?

Generally when doing content authoring we will be pointing to the DAM asset paths only, but never saw using particular renditions paths of the image. can anyone help me to give an example for using this renditions.?

dam renditions

VAr
  • 2,551
  • 1
  • 27
  • 40
krish
  • 469
  • 1
  • 15
  • 34
  • have a look at [how to access image rendition](http://stackoverflow.com/questions/40153767/how-to-access-image-rendition-in-aem) which might be similar to your question. – VAr Feb 16 '17 at 05:06

2 Answers2

3

The most common use case it to have "responsive" images by making use of the picture element (requires polyfills like picturefill.js when used with IE).

Here's an example taken from the Adobe documentation on Adaptive images:

<div data-picture>
    <div data-src='/content/dam/geometrixx-media/articles/meridien.png'></div>                                        
    <div data-src='/content/dam/geometrixx-media/articles/meridien.png/jcr:content/renditions/cq5dam.thumbnail.319.319.png'    data-media="(min-width: 769px)"></div>  
    <div data-src='/content/dam/geometrixx-media/articles/meridien.png/jcr:content/renditions/cq5dam.thumbnail.140.100.png'   data-media="(min-width: 481px)"></div>     
</div>

As a result, the appropriate image will be rendered for the viewport breakpoints defined in data-media.

mickleroy
  • 998
  • 5
  • 8
  • @mickeroy thank you, but a small query for the above coding style when the author wants to select from the pathfield dialog, they will be able to select only the original image path, but not the renditions correct, do we need to handle it in code.? – krish Feb 16 '17 at 14:06
  • 1
    you can easily handle this in code. As long as you have the path to the original image, you can simply append the path to the rendition to it. For example: `data-src='${pathToImage}/jcr:content/renditions/cq5dam.thumbnail.140.100.png'` – mickleroy Feb 16 '17 at 22:53
  • how this renditions are used by Touch UI? – dzenisiy Apr 10 '19 at 13:50
0

You can also consider using Named Transform Image Servlet that comes with acs-aem-commons package. It is handy to control many aspects of the image dynamically using just the image URL.

https://adobe-consulting-services.github.io/acs-aem-commons/features/named-image-transform/index.html

alagar
  • 13
  • 3