How to render different rendition images based on screen resolution in Sightly HTL and in AEM application.
Solved! Go to Solution.
Views
Replies
Total Likes
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
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>
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
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.
Thanks,
Ram
Hi,
Use sourseset to render images based on size etc.
The example you can find in core image component, which uses the sourceset.
https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images
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
Views
Likes
Replies
Views
Likes
Replies