Expand my Community achievements bar.

Nomination window for the Adobe Community Advisor Program, Class of 2025, is now open!

Dynamic media into teaser component

Avatar

Level 1

Hi I'm looking to integrate dynamic media (smart cropping in particular) into the core teaser component. In the end, the teaser should be rendering different sized images from scene7 in different viewport sizes.

What are the best steps or guide to achieving this?

5 Replies

Avatar

Level 3

You can refer to the official documentation to see that DM is now supported in the Teaser component.

Perhaps DM is not configured correctly in the environment you are using the component?

 

Further references:

 

Avatar

Level 9

Hi @aa_w ,

 

You need to customize teaser component. Right now, Teaser v2 provides an ability to render image in teaser.

 

You can modify template (https://github.com/adobe/aem-core-wcm-components/blob/main/content/src/content/jcr_root/apps/core/wc... ) and logic around it. It will allow you to include image resource and configure it as a child resource of teaser.

<sly data-sly-template.image="${@ teaser}">
    <div class="cmp-teaser__image" data-sly-test="${teaser.imageResource}" data-sly-resource="${teaser.imageResource @ resourceType=component.properties.imageDelegate}"</div>
</sly>

 

Best regards,

Kostiantyn Diachenko.

 

Avatar

Level 1

Thank you for the reply.

 

I haven't got around to trying this change yet, but as long as the page templates' image policy has 'Enable DM features' checked, then would this solution treat the teaser image in the same way as a standalone image component?

Avatar

Level 9

Yes, according to the code, it should take image policy in the account. Note please, that your teaser should have imageDelegate property on the component definition. 

Avatar

Level 1

I'm actually working on this issue right now as well. In order to enable dynamic media in the Image v3 component, you have to do it through a component policy. When the teaser v2 uses imageDelegate to pass off handling of the asset to the Image v3 component, AEM does not give you the ability to turn on dynamic media for the delegated image component in the teaser's property. This is a silly product limitation. If there's a workaround for this it needs to be documented.