Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
Bedrock Mission!

Learn more

View all

Sign in to view all badges

SOLVED

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

Avatar

Level 2

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 5

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