Expand my Community achievements bar.

Don’t miss the AEM Skill Exchange in SF on Nov 14—hear from industry leaders, learn best practices, and enhance your AEM strategy with practical tips.

Dynamic media usage for custom components

Avatar

Level 1

I am building a platform using the OOTB core components on AEMaaCS. some of our components are being modified to be dynamic. i.e. we have a custom component that will query pages on the site and we want to render them as a list of teasers.

 

We have implemented this using the delegate pattern to the teaser component, however the images won't work and we have had to modify the teasers use of the image delegate.

 

What i would want to be able to do for this and other custom components that use multiple images is to still utilise the dynamic media functions for getting the correct sized image.

 

I can't find any documentation on how to utilise dynamic media that isn't pointing to a specific resource that has a "fileReference" field that points to the required image.

3 Replies

Avatar

Level 6

In your component dialog, give the author the option to select from a list of smart crop.

In your backend java code construct the dynamic media image url with the smartcrop selection and return that as the image url.

Avatar

Level 1

Do you have an example ? all the core components point to the component with the .coreimg selector

Avatar

Community Advisor

@getaylor Please refer to AEM core components.

 

https://github.com/adobe/aem-core-wcm-components/blob/master/bundles/core/src/main/java/com/adobe/cq...

 

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;