Expand my Community achievements bar.

Dive into Adobe Summit 2024! Explore curated list of AEM sessions & labs, register, connect with experts, ask questions, engage, and share insights. Don't miss the excitement.
SOLVED

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

Avatar

Level 4

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

1 Accepted Solution

Avatar

Correct answer by
Community Advisor

@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

 

View solution in original post

5 Replies

Avatar

Community Advisor

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>

Avatar

Correct answer by
Community Advisor

@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

 

Avatar

Level 6

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

Avatar

Community Advisor

@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