Level 2

Question

Dynamic Media - Implementation in a Custom component

3 replies
755 views
Translate All

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.

N

NavyaSri_M

Level 2

Hi @30991930w169 ,

Please check below articles, they might help-

https://blogs.perficient.com/2024/05/28/enabling-dynamic-media-feature-aem-custom-components/

https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/dynamic-media-intergration-with-custom-component/m-p/383215

Thanks

Translate

AmitVishwakarma

Community Advisor

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

Translate

Amit Vishwakarma - Adobe Commerce Champion 2025 | 17x Adobe certified | 6x Adobe SME

3

30991930w169Author

Level 2

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?

Translate

Sign up

Login with SSO

Login to the community

Login with SSO