Dynamic media into teaser component

[aa_w]

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?

[giuseppebag]

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:

• Setting Up Dynamic Media
  
• Configure Dynamic Media Cloud Service
• Using Dynamic Media with AEM Assets

[konstantyn_diachenko]

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.

[aa_w]

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?

[konstantyn_diachenko]

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. 

[aa_w · Accepted solution]

Thank you. It's using scene7 urls now, but only default dynamic media features. To enable smart cropping should I bring the dialog properties related to it like 'smartcroprenditions' to the teaser component.

[jasonUSC]

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.

[jasonUSC]

For anyone else dealing with this issue, Adobe support has confirmed it is a bug and engineering is working on a solution.

[konstantyn_diachenko]

Hi @jasonUSC , actually, it works fine OOTB.

I just tested on next setup:
I have proxy teaser component under /apps/projecta/components/teaser with following properties:

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:cq="http://www.day.com/jcr/cq/1.0"
    xmlns:jcr="http://www.jcp.org/jcr/1.0"
    jcr:primaryType="cq:Component"
    jcr:title="Teaser"
    sling:resourceSuperType="core/wcm/components/teaser/v2/teaser"
    componentGroup="ProjectA - Content"
    imageDelegate="core/wcm/components/image/v3/image"/>

I have policy for teaser that is assigned to the the template. I configured policy with enabling DM features for Image v3 and assigned it to the same template.

As a result, my teaser includes image v3 resource and  com.adobe.cq.wcm.core.components.internal.models.v3.ImageImpl found configured policy for current page template with enabled DM features.

I am using Core Components 2.23.0 version.

Could you please check what com.adobe.cq.wcm.core.components.internal.models.v1.ImageImpl#currentStyle path is injected to your image Sling model?

Best regards,

Kostiantyn Diachenko.

[jasonUSC]

Go to a page you created with that template and "view as published"
Inspect the source code and look for the <img src> on your teaser... is it a Dynamic Media url?

https://<some-dm-subdomain>.scene7.com/is/image/<company>/my-cool-image?ts=1739815780312&amp;dpr=off

[jasonUSC]

In my case with Adobe support, we found that following Adobe's documentation for imageDelegate too closely was causing our problem.

Documentation provides this example, using the image core component from libs:

imageDelegate="core/wcm/components/image/v3/image"

 Instead you want to use a proxied image component in your project:

imageDelegate="MyApp/components/content/MyApp-proxy-image/v3/image"

 
Once you do that, the work-around described in the core components issues backlog will work.

Until we fix it in the Core Components, following work-around may be used:

1. in AEM, create a policy for the Image component by editing the page template. This creates a template policy at e.g. /conf/core-components-examples/settings/wcm/templates/content-page/policies/jcr:content/root/responsivegrid/core-components-examples/components/image
2. in CRXDE light, copy the policy node above and paste it below the <template-path>/policies/jcr:content node e.g. /conf/core-components-examples/settings/wcm/templates/content-page/policies/jcr:content and rename it cq:featuredimage
   This will make sure that the Image policy is picked up for the featured image of the page.

---