Dynamic Media templates

Last update: February 10, 2025

CREATED FOR:

  • User
Search Best PracticesMetadata Best PracticesContent HubAEM Assets developer documentation

Create Dynamic Media templates using a WYSIWYG template editor and include multiple images and text layers to quickly create banners and flyers and use them in downstream applications. You can also add parameters to the images and text layers included in the template and use Dynamic Media URLs to update the values for those layers 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.

Before you begin

To create a Dynamic Media template, you must have:

  1. Access to Dynamic Media.

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

  3. verified 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 WYSIWYG template

To create a DM template, follow these steps:

Create a blank canvas

Execute these steps to create a blank canvas:

  1. Navigate to Assets Essentials and click Dynamic Media Assets available in the left panel.

    Dynamic Media templates

  2. Click Create Template to save the template under Dynamic Media Assets or navigate to a folder and click Create Template to save the template within that folder. The New Template dialog box displays.
    how to create dynamic templates that can be customised in real time
    To create a folder under Dynamic Media Assets, create a folder under Assets. The folder tree under Assets replicates under Dynamic Media Assets.

  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
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 common editor actions as mentioned below.

  • DM Templates : Select a layer.
  • create a template that can be customized instantly : Click to undo the last action or press Ctrl + Z (Windows) or Cmd + Z (Mac).
  • template to create banners rapidly : Click to redo the last action or press Ctrl + Y (Windows) or Cmd + Y (Mac).
  • template to create flyers rapidly : Click to zoom in the canvas or press Ctrl + + (Windows) or Cmd + + (Mac).
  • template to create banners rapidly : Click to zoom out the canvas or press Ctrl + - (Windows) or Cmd + - (Mac).
  • Press Backspace or delete to delete the selected layer if no text or property is being edited.

Click template to create flyers rapidly > 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

Execute these steps to add images to the canvas:

  1. Click create a banner in no time to display 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

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. Enable Smart Text Resize in the Properties panel to adjust the text length and font size automatically to fit in the designated area optimally.
    best customizable banners

See the Properties Panel to reposition, resize, rotate or delete the layer. Format your text to your desired font, size, color, style, alignment (in the layer) by changing their values in the respective fields under the Text section of the panel.

NOTE
To use a font other than the default Adobe Sans F2 font family, you need to upload and publish the font file to AEM Assets and Dynamic Media. If you have some old fonts in your instance, ensure to reprocess to view them in the Template editor.

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

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

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

Format your text to your desired font, size, color, style, alignment (in the layer) by changing their values in the respective fields under the Text section of the panel.

Smart Text Resize Ensure to include Smart Text Resize (Copyfitting) to fit any text in the designated area optimally by adjusting its font size and length smartly. This capability prevents text overflow or minimizes extra spaces at the bottom of the text.
content creation in no time

Parameterise layers

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 this 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

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

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

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 Essentials > 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 on the preview page, click Publish and confirm to publish. Publish Complete message displays and the publish status updates to Published.

NOTE
Publishing the template requires the template images to be published first.

Copy the delivery URL

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

To copy the URL of the published template displayed in preview:

  1. Click Copy URL. The Copy URL dialog box displays. Select and copy the displayed URL. Observe that 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.

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

video poster

Make real-time updates to 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:

    • Replace image paths for image layers.
    • Adjust layer dimensions and positions (if parameterized).
    • 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 by following these steps:

  1. On Assets Essentials, 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.

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

Experience Manager


The Perfect Blend: A New Era of Collaboration with AEM and Workfront

Adobe Customer Success Webinars

Wednesday, Apr 2, 5:00 PM UTC

Explore how Adobe Experience Manager and Workfront integrate to help teams move from ideation to delivery without the usual bottlenecks, ensuring content is organized, on-brand, and ready to go live faster.

Register

Put the Customer at the Center and Build Relationships That Last a Lifetime

Online | Strategy Keynote | General Audience

First impressions last a lifetime. Great first impressions feel personal, connected, and relevant right from the start. From the first...

Wed, Mar 19, 2:30 PM PDT (9:30 PM UTC)

Register

Rapid Feature Releases with AEM Cloud: Telegraph Media Group’s RDE Strategy

Online | Session | Intermediate

Hear how Telegraph Media Group, the award-winning publisher of The Daily Telegraph, The Sunday Telegraph, The Telegraph Magazine,...

Wed, Mar 19, 3:30 PM PDT (10:30 PM UTC)

Register

Connect with Experience League at Summit!

Get front-row access to top sessions, hands-on activities, and networking—wherever you are!

Learn more

Register now