Dynamic Media - Implementation in a Custom component

[30991930w169]

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?

[NavyaSri_M]

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... 

Thanks

[AmitVishwakarma]

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

[30991930w169]

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?