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?

shyamasundar-ks
Level 2
Level 2

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

1 Accepted Solution
ArunaSurukunta
Correct answer by
Level 5
Level 5

@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
Ankur_Khare
Community Advisor
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>

ArunaSurukunta
Correct answer by
Level 5
Level 5

@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

rampai
Level 5
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

Anudeep_Garnepudi
Community Advisor
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