Skip to main content
hetbv
Level 2
July 6, 2023
Solved

How to load image for mobile , tablet and desktop through custom image rendition ?

I am taking image from the path field now I want to load custom image for mobile, tablet, and desktop through image rendition.

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Nishant-Singh
Nishant-SinghAccepted solution
Adobe Employee
July 7, 2023

You can write your logic to get rendition paths in you Model class.

i.e com.adobe.guides.wknd.core.models.BannerImage

alternatively you can use directly use below snippet -

<div data-sly-use.bannerImage="com.adobe.guides.wknd.core.models.BannerImage">
<img src="${bannerImage.imagePath}" srcset="${bannerImage.imagePath}/jcr:content/renditions/cq5dam.thumbnail.319.319.png 1x,${bannerImage.imagePath}/jcr:content/renditions/cq5dam.thumbnail.48.48.png" alt="My Image">
</div>

View in thread

5 replies

Sudheer_Sundalam
Community Advisor
Sudheer_SundalamCommunity Advisor
Community Advisor
July 6, 2023

@hetbv ,

 

If you are using Dynamic Media Scene7, then you can use Smart Crop to load the images based on the viewport.

Please see information here: https://experienceleague.adobe.com/docs/experience-manager-learn/assets/dynamic-media/images/smart-crop-feature-video-use.html?lang=en

Translate
    Nishant-Singh
    Adobe Employee
    Nishant-SinghAdobe Employee
    Adobe Employee
    July 6, 2023

    You should use AEM Core Components - Image component is having  Adaptive image feature that can be used in your case where different width can be defined in policy and component use best image rendition based on screen size.

     

    If you really need to create a custom component and use custom renditions then you can use HTML 5 Adaptive image feature - you need to create below html structure to use this feature.

    <img src="/content/dam/abc/Untitled.jpg" srcset="/content/dam/abc/Untitled.jpg/jcr:content/renditions/cq5dam.thumbnail.319.319.png 1x,/content/dam/abc/Untitled.jpg" alt="Sample Image">

     

    Example of image src set  :  https://codepen.io/pixelstrolch/pen/yVbdea

     

    Translate
      hetbvAuthor
      Level 2
      July 7, 2023

      Hello @nishant-singh ,

      Thanks for your quick response!!

      I am new to AEM. I have defined a custom rendition of image through a DAM Update Asset workflow. How we can provide dynamic value from the component path field of the image in the IMG tag?

      Would you help me out with this?




      Translate
        Nishant-Singh
        Adobe Employee
        Nishant-SinghAdobe EmployeeAccepted solution
        Adobe Employee
        July 7, 2023

        You can write your logic to get rendition paths in you Model class.

        i.e com.adobe.guides.wknd.core.models.BannerImage

        alternatively you can use directly use below snippet -

        <div data-sly-use.bannerImage="com.adobe.guides.wknd.core.models.BannerImage">
        <img src="${bannerImage.imagePath}" srcset="${bannerImage.imagePath}/jcr:content/renditions/cq5dam.thumbnail.319.319.png 1x,${bannerImage.imagePath}/jcr:content/renditions/cq5dam.thumbnail.48.48.png" alt="My Image">
        </div>

        Translate
          DPrakashRaj
          Community Advisor
          DPrakashRajCommunity Advisor
          Community Advisor
          July 7, 2023

          Your aem instance there should be out of the box rendition being generated, you can customize that to create the rendition size that you intended to work with. Next on html you can work with image tag with data-interchange option which will automatically loads the image as per device

          Translate
            Terms & ConditionsAccessibility statement

            Loading footer...