How to Apply Smart Crop & Image Presets to Content Fragment Image URLs

[margaritageg]

Hi, I have a Content Fragment that contains an image URL field. In my component, I need to allow authors to add multiple Content Fragments, and each fragment includes this image URL field.

My question is: on the backend side of my component, how can I extend Dynamic Media functionality so that every image URL behaves like the core/wcm/components/image/v3/image component — including smart crop and image preset support?

[ManviSharma · Accepted solution]

 Hello @margaritageg ,

You can’t just “turn on Dynamic Media” for arbitrary URLs. You need to either work with DAM asset references (or ImageRef fields) and reuse the same Dynamic Media URL‑generation logic that the core Image v3 component uses, or delegate to the Image component itself.

> What the core Image v3 component actually does
The core Image component doesn’t store a ready-made Dynamic Media URL. At render time it:

• Looks up the DAM asset that was authored.
• Checks if Dynamic Media is enabled and the asset has DM metadata (Scene7 / DM OpenAPI).
• Builds a DM delivery URL from that metadata and the author’s choices (image preset, Smart Crop, modifiers, etc.). [0]
• Emits markup + JS so the browser can swap the right rendition (including Smart Crop auto behaviour) based on viewport/container size. [1]

To get the same behaviour for your Content Fragment images, your backend needs the same inputs (a DM-enabled asset, crop/preset choice) and must build similar DM URLs.

1) Avoid plain URL fields in Content Fragments: If your CF model uses a simple string field that authors fill with an image URL, you can’t reliably reconstruct Dynamic Media information (Smart Crops, presets, etc.).Recommended for AEM as a Cloud Service:

• Change the CF model to use a content reference / media field (an ImageRef in headless), pointing to a DAM asset instead of a raw URL.
• With Dynamic Media configured, that reference can expose DM-specific info like the base DM URL and available Smart Crops. For example, GraphQL already exposes:
• • _dmS7Url – Dynamic Media delivery URL
  • _smartCrops – list of Smart Crop configurations (width/height/etc.)
  
  See the Dynamic Media + Content Fragment GraphQL examples for ImageRef and Smart Crop: [2]

Even if you’re not using GraphQL, the same idea applies: store an asset reference, not a prebuilt URL, so your backend can look up DM metadata and build the right URL.