Dynamic Media - Implementation in a Custom component | Community
Skip to main content
3
30991930w169
Level 2
March 19, 2025
Question

Dynamic Media - Implementation in a Custom component

  • March 19, 2025
  • 2 replies
  • 646 views

Hi,
I would like to understand how to extend dynamic media into custom components.
Suppose we have a component with a number of properties, including images and videos.
What kind of properties should I use for images/videos to make them inherit all the dynamic media features?
What are the steps to take?
And how can the renditions be managed?

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.

2 replies

AmitVishwakarma
Community Advisor
AmitVishwakarmaCommunity Advisor
Community Advisor
March 20, 2025

Hi @30991930w169 ,

Steps to Integrate Dynamic Media in Custom Components:

1. Use Smart Image/Video Core Components (Recommended)

Leverage AEM Core Image or Media Components with Dynamic Media support. If not, follow step 2 for custom build.

2. Custom Component – Dialog Setup

In your component dialog, use PathField for DAM asset selection:

<imagePath jcr:primaryType="nt:unstructured" sling:resourceType="granite/ui/components/coral/foundation/form/pathfield" name="./imagePath" rootPath="/content/dam" required="true" filters="[mediaformat:dynamicMedia]" />

3. HTL Code Example – Dynamic Media URL Generation

<sly data-sly-use.asset="com.adobe.cq.dam.cfm.AssetModel" /> <img src="${asset.dynamicMediaUrl}" alt="Dynamic Media Image"/>

Or use MediaHandler API to get dynamic media URL with renditions.

 

4. Enable Dynamic Media Features

Ensure Dynamic Media is enabled in Tools > Assets > Dynamic Media Configuration.
Assets must be processed via Dynamic Media Cloud.

5. Manage Renditions (Smart Imaging)

Use Image Presets or Smart Imaging URLs, e.g.:

<img src="${asset.dynamicMediaUrl}.img.jpg?wid=800&hei=600&fmt=jpeg&fit=fit" />


Regards,
Amit

Amit Vishwakarma - Adobe Commerce Champion 2025 | 16x Adobe certified | 4x Adobe SME
3
30991930w169Author
Level 2
March 21, 2025

Hi,

thanks for your response!

I want implement the first solution.

For example:

I have a multifield of image.

How I can involve and extend all feature of core component?

 

Terms & ConditionsAccessibility statement

Loading footer...