Expand my Community achievements bar.

Guidelines for the Responsible Use of Generative AI in the Experience Cloud Community.
SOLVED

Add second image to OOTB teaser component

Avatar

Level 3

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

1 Accepted Solution

Avatar

Correct answer by
Community Advisor
4 Replies

Avatar

Correct answer by
Community Advisor

Avatar

Level 3

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

 

shehjadk07_0-1716826226472.png

 

Avatar

Community Advisor

@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