Add second image to OOTB teaser component | Community
Skip to main content
S
shehjadk07
Level 3
May 26, 2024
Solved

Add second image to OOTB teaser component

  • May 26, 2024
  • 2 replies
  • 975 views

Hi All,

 

I want to extend out of the box teaser component and add second image to it. I want to make sure the second image also uses delegation pattern and all the features like Lazy loading, dynamic media etc. When I look at OOTB teaser component core java code it is implementing lot of things and it hard to follow. https://github.com/adobe/aem-core-wcm-components/blob/main/bundles/core/src/main/java/com/adobe/cq/wcm/core/components/internal/models/v2/TeaserImpl.java this class is super class to teaser v1 which again implements AbstractImageDelegatingModel  and so. Would be great to have clear way of understand what all methods needs to be extends implemented etc to add one more to teaser? Also it internally implement CoreResourceWrapper not sure how that works internally

 

Thank you for your help!

 

Regards,

Shehjad

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 aanchal-sikka

@shehjadk07 

 

Please see if the following blogs helps you https://techrevel.blog/2023/09/25/adaptive-image-rendering-via-delegation-for-aem-components/ 

2 replies

arunpatidar
Community Advisor
arunpatidarCommunity Advisor
Community Advisor
May 27, 2024

Hi @shehjadk07 
Please check https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/customize-core-teaser-component-to-add-two-additional-required/m-p/607173 

Arun Patidar
    aanchal-sikka
    Community Advisor
    aanchal-sikkaCommunity AdvisorAccepted solution
    Community Advisor
    May 27, 2024

    @shehjadk07 

     

    Please see if the following blogs helps you https://techrevel.blog/2023/09/25/adaptive-image-rendering-via-delegation-for-aem-components/ 

    Aanchal Sikka
      S
      shehjadk07Author
      Level 3
      May 27, 2024

      @aanchal-sikka Thank you this is very useful blog, one last question I have is adaptive image same as dynamic media if not what is the difference? Also I was wonder without doing much customization how I can add another image property on dialog fileReference2 property so it does not conflict with first fileReference property which can finally expose in Teaser model like imageResource2 and thus in sightly code can be simply rendered using

      <div class="cmp-teaser__image2" data-sly-test="${teaser.imageResource2}" data-sly-resource="${teaser.imageResource2 @ wcmmode=disabled}"></div>

       

       

        aanchal-sikka
        Community Advisor
        aanchal-sikkaCommunity Advisor
        Community Advisor
        May 28, 2024

        @shehjadk07 

         

        Adaptive image is OOTB functionality to assure we render images optimized for the viewport. It does not use Dynamic Media, but AdaptiveImageServlet.

         

        There is hardcoding for fileReference in the servlet, so it may not readily work with any other property name.

        May be you can try creating a child image node under Teaser, which stores image-2 in fileReference. When rendering, use Image component to render this image via data-sly-resource.

        Aanchal Sikka
          Terms & ConditionsAccessibility statement

          Loading footer...