How to render different rendition images based on screen resolution in Sightly HTL?

[shyamasundar-ks]

How to render different rendition images based on screen resolution in Sightly HTL and in AEM application.

[Ankur_Khare]

So here you can write three divs and can show or hide the divs based on the breakpoints.

Under each div u can use the image rendition based on the viewport u want to show.

something like below-

<div class="col-md"><img src="/content/dam/cq5dam.thumbnail.319.319.png"/></div>

<div class="col-sm"><img src="/content/dam/cq5dam.thumbnail.140.100.png"/></div>

<div class="col-xs"><img src="/content/img.60.60.jpeg"/></div>

[Anny0505 · Accepted solution]

@shyamasundar-ks ,

using CSS resonsuve design you can achive with easily.

If you want to display only image then create different classes for different screens and add those classes  in sightly.

If you want to display content and images based on different screensize you can also create templates and reuse them in your sightly. Either one works.

Thanks,

Aruna

[rampai]

Hi @shyamasundar-ks,

You can also check the adaptive image feature of Image core component.

The Core Component Image Component is an adaptive image component that features in-place editing.

https://experienceleague.adobe.com/docs/experience-manager-core-components/using/components/image.ht...

Thanks, 

Ram

[arunpatidar]

Hi,

Use sourseset to render images based on size etc.

The example you can find in core image component, which uses the sourceset.

https://experienceleague.adobe.com/docs/experience-manager-core-components/using/components/image.ht...

https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images

[Anudeep_Garnepudi]

@shyamasundar-ks 

Use HTML picture tag and specify widths in each source tag.

picture>
  <source media="(min-width:650px)" srcset="img_pink_flowers.jpg">
  <source media="(min-width:465px)" srcset="img_white_flower.jpg">
  <img src="img_orange_flowers.jpg" alt="Flowers" style="width:auto;">
</picture>

https://www.w3schools.com/tags/tag_picture.asp

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture