Configure Dynamic media for Dynamic Component | Community
Skip to main content
Level 2
May 5, 2025
Solved

Configure Dynamic media for Dynamic Component

  • May 5, 2025
  • 4 replies
  • 1265 views

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.

Best answer by jasonUSC

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. 

4 replies

SantoshSai
Community Advisor
Community Advisor
May 5, 2025

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!

Santosh Sai
Level 2
May 6, 2025


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?

 

Level 4
May 6, 2025

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
Community Advisor
Community Advisor
May 6, 2025

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_KAuthor
Level 2
May 6, 2025

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
Community Advisor
Community Advisor
May 12, 2025

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

Aanchal Sikka
Shankar_KAuthor
Level 2
May 16, 2025

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

jasonUSCAccepted solution
Level 2
May 16, 2025

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.