Expand my Community achievements bar.

Enhance your AEM Assets & Boost Your Development: [AEM Gems | June 19, 2024] Improving the Developer Experience with New APIs and Events

Dynamic media images/videos for custom components

Avatar

Level 3

Can you please provide some context on using dynamic media images/videos for custom components? If anyone is using this feature, please share some details.

Topics

Topics help categorize Community content and increase your ability to discover relevant content.

4 Replies

Avatar

Community Advisor

Hi, 

I don't think there is an official approach on how to do this, but in reality, it is not that complicated. You just need to keep in mind that you simply need to invoke a correctly formatted URL and/or load the proper JS (if you are using one of the viewers). With that in mind, you can check how the Core components component does this. Basically, you can check this: https://github.com/adobe/aem-core-wcm-components/blob/main/bundles/core/src/main/java/com/adobe/cq/w... 

Something like this would work:

String dmAssetName = asset.getMetadataValue(Scene7Constants.PN_S7_FILE);
if(isDmFeaturesEnabled && (!StringUtils.isEmpty(dmAssetName))){
//image is DM
dmImage = true;
//check for publish side
boolean isWCMDisabled = (com.day.cq.wcm.api.WCMMode.fromRequest(request) == com.day.cq.wcm.api.WCMMode.DISABLED);
//sets to '/is/image/ or '/is/content' based on dam:scene7Type property
String dmServerPath;
if (asset.getMetadataValue(Scene7Constants.PN_S7_TYPE).equals(Scene7AssetType.ANIMATED_GIF.getValue())) {
dmServerPath = DM_CONTENT_SERVER_PATH;
} else {
dmServerPath = DM_IMAGE_SERVER_PATH;
}
String dmServerUrl;
// for Author
if (!isWCMDisabled) {
dmServerUrl = dmServerPath;
} else {
// for Publish
dmServerUrl = asset.getMetadataValue(Scene7Constants.PN_S7_DOMAIN) + dmServerPath.substring(1);
}
dmImageUrl = dmServerUrl + dmAssetName;

 

Hope this helps



Esteban Bustamante

Avatar

Community Advisor

@Sai1278 

 

You can also use IMAGE_DELEGATE to use WCM Core image component to render images, which will also take care of DM aspect. It is used by Teaser as well

 

https://techrevel.blog/2023/09/25/adaptive-image-rendering-via-delegation-for-aem-components/ 


Aanchal Sikka

Avatar

Administrator

@Sai1278 Did you find the suggestions from users helpful? Please let us know if you require more information. Otherwise, please mark the answer as correct for posterity. If you have found out solution yourself, please share it with the community.



Kautuk Sahni

Avatar

Administrator

@Sai1278 Did you find the suggestions from users helpful? Please let us know if you require more information. Otherwise, please mark the answer as correct for posterity. If you have found out solution yourself, please share it with the community.



Kautuk Sahni