51ºÚÁϲ»´òìÈ

DocumentationAEM as a Cloud ServiceUser Guide

Dynamic Media templates dynamic-media-templates

Last update: Mon Apr 28 2025 00:00:00 GMT+0000 (Coordinated Universal Time)

CREATED FOR:

  • User
New Dynamic Media Prime and Ultimate
New AEM Assets Ultimate
New AEM Assets integration with Edge Delivery Services
New UI Extensibility
New Enable Dynamic Media Prime and Ultimate
Search Best Practices
Metadata Best Practices
Content Hub
Dynamic Media with OpenAPI capabilities

Create real time customizable templates for your banners and flyers using Dynamic Media templates, a WYSIWYG template editor. Publish your Dynamic Media template and use it in downstream applications. A Dynamic Media template includes image and text layers. Add parameters to the image and text layers of the template and use Dynamic Media URLs to reposition and resize the layer and update its content in real-time.

Some of the key features include:

  • Dynamic Media WYSIWYG Template Editor: Create customizable banners with image and text layers.
  • Layer Parameterization: Define dynamic key-value pairs for layers to enable real-time updates.
  • Dynamic Media URL Support: Use Dynamic Media URLs for templates, integrating personalized values from 1st or third party applications.
  • Layer Visibility Control: Dynamically hide or show layers as needed.
  • Smart Text Resizing: Automatically adjust text size to fit designated areas.

Some of the key benefits of Dynamic Media templates include:

  • Optimize 1:1 Personalization: Tailor content to real-time customer signals.
  • Reduce Manual Effort: Automate and accelerate content creation and management.
  • Ensure Consistent Omnichannel Experiences: Maintain brand consistency across channels.
  • Reuse Content Effectively: Avoid single-use content and scale with dynamic, parameterized templates.
  • Mitigate Risks: Update pricing, discounts, and links in real-time.
  • Enhance Customer Engagement: Drive interactive, contextually relevant experiences.
NOTE
Customers with subscriptions to the Enhanced Security SKU cannot use any Dynamic Media capabilities, including Dynamic Media Templates, on that Cloud Services program.

Learn to create a Dynamic Media template step by step in this video.

video poster

Before you begin prerequisites-for-dynamic-media-wysiwyg-template

Fulfil the following requirements to create a Dynamic Media template and generate its delivery URL:

  1. Access to Dynamic Media.

  2. On the Assets View homepage, you have a folder in Dynamic Media Assets to save your template. Create a folder in Assets Assets to replicate that folder in Dynamic Media Assets.

  3. Sync the images available in your AEM Assets instance with Dynamic Media to use them for creating the template.

  4. Publish the images to use in creating the template to generate the delivery URL of the template after creating it. The delivery URL can be used in downstream applications.

  5. To use a font other than the default 51ºÚÁϲ»´òìÈ Sans F2 font in the template’s text layer, upload and publish the font file to AEM and Dynamic Media simultaneously. The supported font file formats are, AFM, OTF, PFB, PFM, PhotoFont, TTC, TTF. Also, ensure to reprocess the existing fonts to use them. See Fonts for more information.

  6. verify the following in the Touch UI:

    • On the Edit Dynamic Media Configuration page, Dynamic Media sync mode that is set to Disabled by default, is not applied to all AEM folders (Sync all content is unchecked). See configuring Dynamic Media Cloud Service for more information.
    • Dynamic Media sync mode is set to Enable for subfolders for the destination folder or subfolder where you will save the template after creation. See configuring Dynamic Media Cloud Service for more information.

Create Dynamic Media template how-to-create-dynamic-media-template

Execute the following steps to create a Dynamic Media template:

  1. Create a blank canvas
  2. Add images to the canvas
  3. Add text layers to the canvas
  4. Edit or delete a layer
  5. Parameterise layers

Create a blank canvas create-a-canvas

Execute these steps to create a blank canvas:

  1. Navigate to Assets View, select Dynamic Media Assets available in the left panel and navigate to your folder to save your template in that folder.

    Dynamic Media templates

  2. Select Create Template. The New Template dialog box displays.
    how to create dynamic templates that can be customised in real time

    note note
    NOTE
    The template is saved in the location where you create it. On Assets View home page, select Dynamic Media Assets and click Create Template to save the template in Dynamic Media Assets root folder.

  3. Specify a template name, define the canvas width and height, and click Create. A blank canvas displays with menu options on both sides to use for creating the template. Hover over the menu options to see their tooltip.
    real-time customizable template

    note note
    NOTE
    The allowed width and height range is from 50 to 5000.

Menu options on the right pane: Use these options to add the necessary images and text layers to the canvas.

  • DM Templates : Click to add images to the canvas.
  • customizable templates : Click to add texts to the canvas.
  • customizable templates : Click to see the list of all layers (image and text) on the canvas. Every image and text added to the canvas is represented as a separate layer.

Menu options on the left pane: Use these options for the following common editor actions.

  • DM Templates : Select DM Templates and click a layer on the canvas to select it.
  • templates that support customization : Click templates that support customization or use keyboard shortcut, Ctrl + ] (Windows) or Cmd + ] (Mac) to bring a selected layer forward.
  • how to create a template that can be customized easily : Click how to create a template that can be customized easily or use keyboard shortcut, Ctrl + [ (Windows) or Cmd + [ (Mac) to send a selected layer backward.
  • create a template that can be customized instantly : Click create a template that can be customized instantly or use keyboard shortcut, Ctrl + Z (Windows) or Cmd + Z (Mac) to undo the last action.
  • template to create banners rapidly : Click template to create banners rapidly or use keyboard shortcut, Ctrl + Y (Windows) or Cmd + Y (Mac) to redo the last action.
  • template to create flyers rapidly : Click template to create flyers rapidly or use keyboard shortcut, Ctrl + + (Windows) or Cmd + + (Mac) to zoom in the canvas.
  • template to create banners rapidly : Click template to create banners rapidly or use keyboard shortcut, Ctrl + - (Windows) or Cmd + - (Mac) to zoom out the canvas.
  • Press Backspace or delete to delete the selected layer if no text or property is being edited.

Click template to create flyers rapidly and select more options ( ) on the Canvas layer to edit the canvas dimensions anytime while creating the template.

NOTE
Templates allow a maximum of 20 layers, including the Canvas.

Add images to the canvas add-images-to-the-canvas

Execute these steps to add images to the canvas:

  1. Click create a banner in no time to open the Asset Selector panel. The panel displays the images in your AEM Assets instance that are synced to Dynamic Media.
  2. Browse the panel or use keywords in the search bar to find a specific image.
  3. Drag and drop an image on the canvas to use it. See the Properties Panel for resizing or repositioning a layer on the canvas.
    create a banner within seconds

Add text layers to the canvas add-text-to-the-canvas

Execute these steps to add text layers to the canvas:

  1. Click creating new banners fastly to add a text layer to the canvas and open the Properties panel.
  2. Select the layer and click the text to update it.
  3. Select Smart Text Resize in the Properties panel to automatically adjust the text length and font size to optimally fit in the designated area.
    best customizable banners

See the Properties Panel to reposition, resize, rotate or delete the layer. Format your text to the required font, size, color, style, alignment (in the layer) by changing their values in the respective fields under the Text section of the panel. The Font Family field displays 51ºÚÁϲ»´òìÈ Sans F2 default font, the reprocessed existing fonts and the newly uploaded and published fonts. See point 5 in the Before you begin section above for more information.

Edit or delete a layer edit-or-delete-a-layer

Execute these steps to edit or delete a canvas layer:

  1. Click templates with support to dynamic updates and select the layer either on the canvas or from the Layers list.
  2. Click more options ( templates with support to real-time updates ) to edit or delete the layer.
  3. Click Delete to delete the layer.
  4. Click Edit to edit the layer using the Properties Panel.
    rapid banner creation

Properties Panel properties-panel

To navigate to a layer’s properties panel:

  1. Click rapid content creation .
  2. Select the layer from the list.

This panel displays the position of the layer’s center point on the canvas plane (X and Y values) and the layer’s dimensions (width and height) along with text formatting options.

rapid content creation

From the properties panel of a layer, select another layer on the canvas to navigate to its properties panel.

Reposition, resize, rotate or delete a layer reposition-resize-delete-a-layer

See these common layer editing actions to edit a text or an image layer:

  • Reposition the layer: Drag the layer to move it anywhere on the canvas. This action updates the X and Y values in the properties panel.
  • Resize the layer: Select the layer and drag its edge handles to resize it. This action updates the W (width) and H (height) values in the properties panel.
  • Rotate the layer: Drag the square handle placed vertically above the layer to rotate it around its center. This action updates the angle values in the properties panel.
  • Delete the layer: Press Backspace or delete and then click Confirm to delete a selected layer.

Text formatting options text-formatting-options-on-properties-panel

Format your text to required font, size, color, style, alignment (within the layer) by changing their values in the respective fields under the Text section on the panel.
Ensure to include Smart Text Resize. Smart Text Resize works on Copyfitting algorithum to optimally fill text in the text area and prevents text overflow and minimizes extra space at the bottom of the text.

content creation in no time

Parameterise layers parameterise-a-layer

After creating a template with multiple layers of images and texts, parameterise the selected layers. When a layer or its property is parameterised, it gets a key-value pair (also called as parameter). This parameter can be included in the template URL to update the layer’s position, size or content in real time resulting in template customisation in no time.

To parameterise a layer:

  1. click instant content creation , select a layer and click Parameters. The Parameters panel displays.
  2. Toggle Include Parameter to parameterise a property. See Parameters panel option to know the property’s behaviour after parameterisation.
  3. Optional: Rename the parameter name. A parameter name has layer name followed by a suffix. For a selected layer all its parameterized properties share the same layer name followed by a varying suffix. Rename the layer name by following the semantic naming convention so that when you include the parameter in the URL, the parameter name self explains about the layer’s content or its purpose.
  4. Click Save.
    instant content creation
    To switch between the Parameter panel of an image and text layer, select the layer on the canvas and click Parameters.

Parameters panel option parameterisation-options-or-allowed-parameters

The parameterised properties can be included as URL parameters in the template URL to edit the template in real time using the URL.

Image parameters:

X: Include to move the layer horizontally along its centreline, parallel to the X-axis of the template plane, by changing the parameter’s value in the URL.
Y: Include to move the layer vertically along its centre line, parallel to the Y-axis of the template plane, by changing the parameter’s value in the URL.
Width: Include to adjust the layer’s width by changing the parameter’s value in the URL.
Height: Include to adjust the layer’s height by changing the parameter’s value in the URL.
Hide: Include to hide or show the layer in the template using 0 (show) and 1 (hide).
Source: Include to replace the layer’s image with new image by changing the image path in the parameter’s value in the URL.

Text formatting parameters:

Include the below parameters to edit the text, its font, colour and size from the URL by updating the parameter values in the URL.

Text: Include to update text from the URL.
Font Family: Include to update the text’s font from the URL.
Font Size: Include to update the text’s font size from the URL.
Text color: Include to update the text’s font color from the URL.

Group layers to control their visibility simultaneously group-layers

Another way to keep your templates flexible, is by utilising a single parameter name to control multiple layers. This strategy is helpful for the visibility (hide or show layers) parameter, to update the design or graphics from a single template.

Follow these steps to assign the same name to the hide parameters ( fast content creation ) of multiple layers, allowing you to hide or show them simultaneously.

  1. Navigate to the Properties Panel of a layer.
  2. Toggle the Hide Parameter if not parameterised earlier.
  3. Optional: Rename the Hide Parameter.
  4. Copy the Hide Parameter name.
  5. Go to the Parameter panel of other layers by selecting them from the canvas and toggle their Hide Parameter if not parameterised.
  6. Replace their Hide parameter name with the copied name.
  7. Click Save to group the layers.
  8. Execute step 3 and then 4 in Preview and Publish section to see your changes.

Preview and publish the template to copy the delivery URL preview-and-publish-template-and-copy-template-deliver-url

Execute these steps to preview and publish the template and copy the delivery URL:

  1. On the canvas page, click Preview. You can also navigate to Assets View > Dynamic Media Assets > find and select your template > click Edit Template > click Preview. The preview page displays the template, its parameters (parameterized layers and properties), publish status, and the Publish option.

  2. Select parameters from Template Parameters panel to edit their values and instantly update the content, size, position, or text formatting of the corresponding template layer in the preview. For example:

    1. Select a text layer and edit its text or
    2. Select an image layer, click creating content on the fly , select an image from the asset selector, and click Refresh.

    The template updates immediately, displaying the edited text and replacing the previous image with the new one. Additionally, the image parameter value reflects the new image path. Similarly, you can resize a layer by adjusting its values, and the changes are applied to the template in real time.

  3. Select the Hide parameter for grouped layers from the list to show or hide them together in the template.

  4. Optional: Change the Hide parameter value between 0 and 1 and click Refresh to see the changes. Layers with the same Hide parameter hides or displays together. Similarly, you can control the layers’ visibility from the URL.

    creating content on the fly
    You can also toggle Include all parameters to edit all of the displayed parameter values and see the updates in the template preview.

  5. To publish the template from the preview page, click Publish and confirm to publish. A Publish Complete message displays and the publish status updates to Published.

Copy the delivery URL

The selected parameters on the Preview page become the URL parameters in the template URL.

Ensure the images in the template are already published to AEM and Dynamic Media to generate the delivery URL of the template.

Execute the following steps to copy the delivery URL of the template:

  1. Click Copy URL. The Copy URL dialog box displays. Select and copy the displayed URL. The first parameter in the URL starts after a question mark (?) and a key-value pair starts with $ and ends with &. The key and value are separated by an equals sign (=), with the key on the left and the value on the right.
  2. Paste this URL in your browser tab and see your live template. Customize the template in real time by updating the required parameter’s value (Key’s value) in the URL directly as demonstrated in step 2 of Preview and Publish section.
  3. Use this URL for rapid merchandising of your products or services. You can share this URL with your customers or integrate it into your website or any downstream third-party application to display the banner and make real-time updates to it to reflect the ongoing offers.

Make real-time updates to the template from the URL update-the-template-from-the-url

Editing parameters directly in the URL can be tedious. To simplify:

  1. Copy the URL and paste it into a notepad.

  2. Use Cmd+F (Mac) or Ctrl+F (Windows) to find and edit the parameter values. Such as:

    • Find and replace image paths for image layers.
    • Find layer’s parameterized coordinates, width and height, to adjust their values.
    • Edit text, font, color, size, or alignment for text layers.
    • Change visibility values between 0 and 1.

Paste this updated URL in your browser to view the changes.

Edit the template edit-the-template

Edit the template by following these steps:

  1. On the Assets view, click Dynamic Media Assets.
  2. Navigate to the template location.
  3. Select the template.
  4. Click Edit Template. The template canvas displays the template and the list of all its layers in the Layers panel. Start editing your template as per your requirements.

Turn any image or text layer of your Dynamic Media template into a hyperlink by adding a CTA link to it that directs users to a target page.

Execute these steps to add a CTA link to a layer:

  1. Navigate to your template location, select the template and click edit Edit Template. The template displays on the canvas.

  2. Select the template layer and navigate to its properties panel to add a CTA link to it.

  3. On the properties panel, select Add CTA, specify the destination URL in the URL field and click Save.

    add CTA

  4. Click Preview and select Publish to publish your template, if not published earlier.

  5. Navigate to the folder where this template is saved, select this template and click details page Details.

  6. Click Copy Options and select Copy Embed Code. Ensure to publish the template images to AEM and Dynamic Media to copy the embed code.

    copy embed code

    The following is an example of the Embed Code:

    code language-json 
     <div class="adobe-dynamicmedia-template-embed-container">
 <img id="<Image ID>>" src="<Image Source>>" alt="adobe dynamicmedia template" usemap="#adobe-dynamicmedia-template-map" width="800" height="300">
 <map name="adobe-dynamicmedia-template-map">
 <area shape="rect" coords="417,-60,817,340" href="https://business.adobe.com/products.html" alt="Layer with CTA" title="https://business.adobe.com/products.html" target="_blank">
 <area shape="rect" coords="6,206.57,129,231.43" href="https://business.adobe.com/products.html" alt="Layer with CTA" title="https://business.adobe.com/products.html" target="_blank">
 </map>
 </div>

  7. Add the copied embed code to your site’s HTML file and run it in your browser to display the template.

Click the CTA element on the template to navigate to the destination page.

Watch this step by step video to learn how to add a CTA link to a template layer.

video poster

Important points to note important-points-to-note

  • After creating a template with parameterized image layers for dynamic updates, ensure that the images intended for future updates share the same dimensions as the parameterized images. This ensures the images fit perfectly within the layers without overflowing or leaving empty spaces. Currently, the template does not support automatic dimension adjustments to fit images into the layers.
  • There is no substring support in a text layer. User cannot apply different font properties on substring of a text layer.
  • Support of multiple Dynamic Media companies is not currently available with Dynamic Media Templates.
  • In case of copy or move, Destination Selector shows all the folders (including non-Dynamic Media synced folders). Also, currently, it does not display the Dynamic Media Template assets (both of these are limitations of destination selector).
  • Any update operation on a folder (for example, Publish or Delete) from Assets section impacts the Dynamic Media Templates available within that folder.
  • Trash does not work for Dynamic Media Templates. If an asset is moved to trash and then restored, the asset is restored in AEM but not on Dynamic Media. The same is valid for Dynamic Media Templates.

See also

  1. Explore Dynamic Media and its capabilities
  2. Explore Dynamic Media with OpenAPI capabilities
recommendation-more-help
fbcff2a9-b6fe-4574-b04a-21e75df764ab