Add second image to OOTB teaser component

[shehjadk07]

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/w... 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

[arunpatidar]

Hi @shehjadk07 
Please check https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/customize-core-teaser-comp... 

[aanchal-sikka · Accepted solution]

@shehjadk07 

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

[shehjadk07]

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

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