Dynamic media usage for custom components | Community
Skip to main content
T
taggatmerkle
Level 2
January 14, 2022

Dynamic media usage for custom components

  • January 14, 2022
  • 2 replies
  • 1646 views

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.

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

2 replies

ibishika
ibishika
Level 4
January 14, 2022

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.

    T
    taggatmerkleAuthor
    Level 2
    January 14, 2022

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

      Shashi_Mulugu
      Community Advisor
      Shashi_MuluguCommunity Advisor
      Community Advisor
      January 28, 2022

      @taggatmerkle Please refer to AEM core components.

       

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

       

      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;

        Terms & ConditionsAccessibility statement

        Loading footer...