Configure Dynamic media for Dynamic Component

[Shankar_K]

Hi ,

    I am trying to create a dynamic component that displays pages as cards, the data is dynamically pulled from page properties,like featureImage , page title ,etc ,as we have dynamic media I am trying to utilize it by using image component in card component to load the featuredImage from dynamic media, Is this possible , I need to render that dynamic image urls in a image component.

[SantoshSai]

Hi @Shankar_K,

Yes, it's absolutely possible to create a dynamic card component in AEM that pulls page properties like featureImage, title, description, etc., and uses the AEM Dynamic Media image component to render those images.

Here’s how you can go about it:

1. Expose page properties via Sling Model (Card Model)

@Model(adaptables = Resource.class, defaultInjectionStrategy = DefaultInjectionStrategy.OPTIONAL)
public class CardModel {

    @Inject
    private Page currentPage;

    public String getTitle() {
        return currentPage.getTitle();
    }

    public String getFeatureImagePath() {
        return currentPage.getProperties().get("featureImage", String.class);
    }
}

2. In HTL: Embed the Image Core Component dynamically

<sly data-sly-use.card="com.myproject.models.CardModel" />
<sly data-sly-resource="${['featureImageComponent', 'core/wcm/components/image/v3/image']
                         @
                         resourceType='core/wcm/components/image/v3/image',
                         inherit=false,
                         wcmmode='disabled',
                         requestAttributes={
                             'fileReference': card.featureImagePath
                         }}">
</sly>

<h3>${card.title}</h3>

This renders the core image component using the dynamic fileReference (your page property).

Just in case:

If you need to control image presets, smart crops, etc., ensure:

• The image in DAM is published to Dynamic Media.

• The Image component is configured to use Dynamic Media.

• You can then use the asset delivery URL or smart crop rendition as the image src.

Hope that helps!

[SivaNa3]

Hi @SantoshSai , 
We tried your approach, still the images are loading from the dam.

<h1>Image test</h1>
<sly data-sly-use.imageAttrs="com.projectname.core.models.ImageAttrs"/>



<sly data-sly-resource="${['image1', 'projectname/components/content/image'] @



  resourceType='projectname/components/content/image', 
  wcmmode='disabled',



  requestAttributes=imageAttrs.attributes}" />
<h1>Image end</h1>
package com.projectname.core.models;



import com.adobe.cq.sightly.WCMUsePojo;



import java.util.HashMap;



import java.util.Map;



import org.slf4j.Logger;
import org.slf4j.LoggerFactory;



public class ImageAttrs extends WCMUsePojo {
    private static final Logger LOG = LoggerFactory.getLogger(ImageAttrs.class);
    @Override



    public void activate() {



    LOG.error("OPENING");    



    }



    public Map<String, Object> getAttributes() {



        Map<String, Object> attrs = new HashMap<>();



        attrs.put("fileReference", "/content/dam/projectname/multi-column/projectname/imagetest.jpg");



        attrs.put("alt", "Beervana Portland");
        LOG.error("path {}" ,attrs);



        return attrs;



    }



}
<div data-cmp-src="/content/projectname/us/test-dynamic-media.coreimg{.width}.jpeg/1746435466895/imagetest.jpeg" data-asset-id="93da558b-5300-4a6f-be29-600032eb3b96" id="image-848fca0a89" data-cmp-data-layer="{&quot;image-848fca0a89&quot;:{&quot;@type&quot;:&quot;contenthub/components/content/image&quot;,&quot;image&quot;:{&quot;repo:id&quot;:&quot;93da558b-5300-4a6f-be29-600032eb3b96&quot;,&quot;repo:modifyDate&quot;:&quot;2025-05-05T08:57:46Z&quot;,&quot;@type&quot;:&quot;image/jpeg&quot;,&quot;repo:path&quot;:&quot;/content/dam/imagetest/multi-column/imagetest.jpg&quot;}}}" data-cmp-hook-image="imageV3" class="cmp-image" itemscope="" itemtype="http://schema.org/ImageObject">

<img src="/content/projectname/us/test-dynamic-media.coreimg.jpeg/1746435466895/imagetest.jpeg" loading="lazy" class="cmp-image__image" itemprop="contentUrl" alt="" role="presentation">



</div>

How to fix this?

[Shankar_K]

Hi @SantoshSai  @AmitVishwakarma  @ShivamKumar 
I have tried the Option 2
But still i am seeing dam path 

<h1>Image test</h1>
<sly data-sly-use.imageAttrs="com.projectname.core.models.ImageAttrs"/>
<sly data-sly-resource="${['image1', 'projectname/components/content/image'] @
  resourceType='projectname/components/content/image', 
  wcmmode='disabled',
  requestAttributes=imageAttrs.attributes}" />
<h1>Image end</h1>

import com.adobe.cq.sightly.WCMUsePojo;
 
import java.util.HashMap;
 
import java.util.Map;
 
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
 
public class ImageAttrs extends WCMUsePojo {
    private static final Logger LOG = LoggerFactory.getLogger(ImageAttrs.class);
    @Override
    public void activate() {
    LOG.error("OPENING");    
    }
    public Map<String, Object> getAttributes() {
        Map<String, Object> attrs = new HashMap<>();
        attrs.put("fileReference", "/content/dam/projectname/multi-column/projectname/imagetest.jpg");
        attrs.put("alt", "Beervana Portland");
        LOG.error("path {}" ,attrs);
        return attrs;
    }
}

How to fix this?

[ShivamKumar]

Hi @Shankar_K ,

You can follow below steps:-

@Model(adaptables = Resource.class, defaultInjectionStrategy = DefaultInjectionStrategy.OPTIONAL)
public class CardListModel {

    @Inject
    private Scene7Service scene7Service; // Inject the Scene7 (Dynamic Media) service

    @Inject
    @Self
    private Resource resource;

    private List<CardItem> pages;

    public List<CardItem> getPages() {
        return pages;
    }

    @PostConstruct
    protected void init() {
        pages = new ArrayList<>();

        ResourceResolver resolver = resource.getResourceResolver();
        PageManager pageManager = resolver.adaptTo(PageManager.class);

        // Example: Loop child pages under this resource
        Resource parentPageRes = resource.getParent();
        Page parentPage = pageManager.getContainingPage(parentPageRes);

        for (Page childPage : parentPage.listChildren()) {
            String title = childPage.getTitle();
            String imagePath = childPage.getContentResource().getValueMap().get("featuredImage", "");

            String dmUrl = getDynamicMediaUrl(imagePath, resolver);

            pages.add(new CardItem(title, dmUrl));
        }
    }

    private String getDynamicMediaUrl(String assetPath, ResourceResolver resolver) {
        if (assetPath == null || assetPath.isEmpty()) {
            return "";
        }

        Asset asset = resolver.getResource(assetPath).adaptTo(Asset.class);
        if (asset == null) return "";

        String assetName = asset.getName();
        String dmName = assetName.substring(0, assetName.lastIndexOf('.')); // remove extension

        String companyAlias = scene7Service.getCompanyAlias();
        return "https://" + companyAlias + ".scene7.com/is/image/" + companyAlias + "/" + dmName;
    }

    public class CardItem {
        private final String title;
        private final String imageUrl;

        public CardItem(String title, String imageUrl) {
            this.title = title;
            this.imageUrl = imageUrl;
        }

        public String getTitle() {
            return title;
        }

        public String getImageUrl() {
            return imageUrl;
        }
    }
}

What  it does:-

• Takes the DAM image path (e.g. /content/dam/site/image.jpg).
• Uses Asset API to get the image name (image.jpg) and strips .jpg.
• Uses Scene7Service to get your Dynamic Media domain alias.
• Constructs a Scene7 dynamic image URL, like: https://yourcompany.scene7.com/is/image/yourcompany/image

Then you can simply iterate all the properties in HTL:-

<sly data-sly-use.model="com.yourproject.core.models.CardListModel" data-sly-list.item="${model.pages}">
  <div class="card">
    <img src="${item.imageUrl}" alt="${item.title}" loading="lazy"/>
    <h3>${item.title}</h3>
  </div>
</sly>

Try this and let me know if it works.
Thanks.

[AmitVishwakarma]

Hi @Shankar_K ,

You can create a dynamic component that displays page properties (like featuredImage, title, etc.) and renders the image using Dynamic Media (Scene7) via either:


Option 1: Manual URL Construction using Scene7Service

You're doing this already:

Pulling featuredImage from each child page.

Using Scene7Service.getCompanyAlias() to construct the image URL:

https://<companyAlias>.scene7.com/is/image/<companyAlias>/<assetName>

Works well if:

You just need a URL (simple HTML <img> tag).

You don’t need the core image component features (e.g., smart crop UI, lazy loading config, etc.)

This is production-safe if:

Images are published to Dynamic Media

Aliases and asset names are consistent

Option 2: Use AEM Core Image Component (with Dynamic Media Support)

You can render the Image Core Component dynamically inside your card component:

Sling Model (per card):

@Model(adaptables = Resource.class, defaultInjectionStrategy = DefaultInjectionStrategy.OPTIONAL)
public class CardModel {

    @Inject
    private Page currentPage;

    public String getTitle() {
        return currentPage.getTitle();
    }

    public String getFeatureImagePath() {
        return currentPage.getProperties().get("featuredImage", String.class);
    }
}

HTL Example (Dynamic Image Component Call):

<sly data-sly-use.card="com.project.models.CardModel" />

<div class="card">
  <sly data-sly-resource="${['image-' + card.title, 'core/wcm/components/image/v3/image']
      @ resourceType='core/wcm/components/image/v3/image',
        wcmmode='disabled',
        requestAttributes={
          'fileReference': card.featureImagePath
        }}"/>
  <h3>${card.title}</h3>
</div>

This is extremely clean, and:

Leverages all core image features (DM presets, smart crop, WebP support).

Requires the image component policy to be configured for Dynamic Media.

Note:

If you're aiming for:

Full Dynamic Media feature set (smart crops, responsive presets)

Maximum reusability and consistency

Use the Core Image Component approach (Option 2).
Otherwise, if you just need raw Scene7 URLs for image display, stick to Option 1.

Regards,
Amit

[Shankar_K]

Im getting this error
b\components\content\dynamic-media-comp\dynamic-media-comp.html [7:68]: ${['featureImageComponent', 'core/wcm/components/image/v3/image']
@resourceType='core/wcm/components/image/v3/image',inherit=false,wcmmode='disabled',requestAttributes={\'fileReference': card.featureImagePath\}}: token recognition error at: '{'
[INFO] Processed 80 files in 11021ms

[aanchal-sikka]

@Shankar_K Did you find the suggestions helpful? Please let us know if you require more information. Otherwise, please mark the answer as correct for posterity. If you've discovered a solution yourself, we would appreciate it if you could share it with the community. Thank you!

[Shankar_K]

Hi @aanchal-sikka i tried both solutions but the use case is 

Option 2: Use AEM Core Image Component (with Dynamic Media Support)

You can render the Image Core Component dynamically inside your card component:

This is where im getting the HTL error mentioned above 
Is there any way i can achieve this

[jasonUSC · Accepted solution]

I think if the asset was uploaded locally and published to aem dm, you can use the local path to get the jcr:uuid from the local dam and prefix it with “urn:aaid:aem:“ to get the assetId, and then you can use it to construct your delivery url.