Skip to main content
shyamasundar-ks
Level 3
October 18, 2021
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
Community Advisor
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

 

View in thread

5 replies

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

Translate
Ankur
    Anny0505
    Community Advisor
    Anny0505Community AdvisorAccepted solution
    Community Advisor
    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

     

    Translate
      rampai
      Community Advisor
      rampaiCommunity Advisor
      Community Advisor
      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

      Translate
        arunpatidar
        Community Advisor
        arunpatidarCommunity Advisor
        Community Advisor
        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

         

        Translate
        Arun Patidar
          Anudeep_Garnepudi
          Community Advisor
          Anudeep_GarnepudiCommunity Advisor
          Community Advisor
          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

          Translate
          AG
            Terms & ConditionsAccessibility statement

            Loading footer...