Dynamic media into teaser component | Community
Skip to main content
A
aa_w
Level 2
February 21, 2025
Solved

Dynamic media into teaser component

  • February 21, 2025
  • 3 replies
  • 1479 views

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?

Best answer by aa_w

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. 


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.

3 replies

giuseppebaglio
giuseppebaglio
Level 10
February 21, 2025

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:

 

    konstantyn_diachenko
    Community Advisor
    konstantyn_diachenkoCommunity Advisor
    Community Advisor
    February 21, 2025

    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/wcm/components/teaser/v2/teaser/image.html ) 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.

     

    Kostiantyn Diachenko, Community Advisor, Certified Senior AEM Developer, creator of free AEM VLT Tool, maintainer of AEM Tools plugin.
      A
      aa_wAuthor
      Level 2
      February 24, 2025

      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
      Community Advisor
      konstantyn_diachenkoCommunity Advisor
      Community Advisor
      February 25, 2025

      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. 

      Kostiantyn Diachenko, Community Advisor, Certified Senior AEM Developer, creator of free AEM VLT Tool, maintainer of AEM Tools plugin.
        J
        jasonUSC
        Level 2
        February 22, 2025

        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.

          J
          jasonUSC
          Level 2
          February 26, 2025

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

            konstantyn_diachenko
            Community Advisor
            konstantyn_diachenkoCommunity Advisor
            Community Advisor
            February 26, 2025

            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.

            Kostiantyn Diachenko, Community Advisor, Certified Senior AEM Developer, creator of free AEM VLT Tool, maintainer of AEM Tools plugin.
              Terms & ConditionsAccessibility statement

              Loading footer...