How to render different rendition images based on screen resolution in Sightly HTL? | Community
Skip to main content
shyamasundar-ks
Level 3
Oct 18, 2021 5:18 PM UTC
Solved

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

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.
Anny0505
Anny0505Accepted solution
New Participant
Oct 18, 2021 6:40 PM UTC

@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 reply

5 replies

Anudeep_Garnepudi
Anudeep_Garnepudi
New Participant
Oct 19, 2021 6:02 AM UTC

@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

Translate
    arunpatidar
    arunpatidar
    New Participant
    Oct 18, 2021 9:00 PM UTC

    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

     

    Translate
    Arun Patidar
      rampai
      rampai
      Level 1
      Oct 18, 2021 7:52 PM UTC

      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

      Translate
        Anny0505
        Anny0505Accepted solution
        New Participant
        Oct 18, 2021 6:40 PM UTC

        @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

         

        Translate
          Ankur_Khare
          Ankur_Khare
          New Participant
          Oct 18, 2021 5:42 PM UTC

          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>

          Translate
            Terms & ConditionsAccessibility statement

            Loading footer...