How to render different rendition images based on screen resolution in Sightly HTL? | Community
Skip to main content
S
shyamasundar-ks
New Participant
October 18, 2021
Solved

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

  • October 18, 2021
  • 5 replies
  • 2818 views

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

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by Anny0505

@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

 

5 replies

Anudeep_Garnepudi
Anudeep_Garnepudi
New Participant
October 19, 2021

@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

    arunpatidar
    arunpatidar
    New Participant
    October 18, 2021

    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.html?lang=en

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

     

    Arun Patidar
      rampai
      rampai
      New Participant
      October 18, 2021

      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.html?lang=en

       

      Thanks, 

      Ram

        Anny0505
        Anny0505Accepted solution
        New Participant
        October 18, 2021

        @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

         

          Ankur_Khare
          Ankur_Khare
          New Participant
          October 18, 2021

          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>

            Terms & ConditionsAccessibility statement

            Loading footer...