---
title: Dynamic media with AJO
slug: docs/dynamic-media-with-ajo
docTags:
createdAt: 2025-04-03T10:31:09.404Z
---
# Introduction
Dynamic Media lets you manage and publish dynamic digital experiences—a feature unique to Experience Manager Assets. This documentation describes the integration of AEM Assets and dynamic media with AJO and utilises it at the email designer level in AJO.
In this dynamic media with AJO demo, we will use the **smart-crop **feature available at the AEM instance level along with a few parameters for different renditions and **Dynamic media templates** from assets to achieve personalization.
## Demo Storyline (Dynamic Media Templates)
**USE CASE ([SECURFINANCIAL - CREDIT CARD APPLICATION](https://experience.adobe.com/#/@demosystem4/sname\:prod/journey-optimizer/content-templates/details/c7936fb0-41cf-445d-a803-809940a1b3b7/email))**
NOTE\: *If you'd like to replicate the below OOTB demo flow in your sandbox in ADSS or any other org, follow the setup instructions to enable Smart Crop and Renditions for your folder.*
SecurFinancial as a brand wants to send the credit card application email in a more personalised way by using dynamic media templates and showcasing there name on the credit card in the email.
1. We will use the base image of the credit card in the [ADSS AEM Instance > Assets > SecurFinancial folder.](https://author-p97303-e890303.adobeaemcloud.com/ui#/aem/assets.html/content/dam/securfinancial)
2\. Select the base image **credit-card.png**, click **create template **from the top nav bar, and give proper name.
3\. From the rightmost panel, select **add text(T+ Symbol) **and align accordingly as per your look and feel. Also, for those **text properties,** go on the **parameters** tab under **text**, toggle the **include param to on**, give the **parameter name** as name, and add some default value, and click on save.
4\. Publish the above template and go to** AJO Prod** associated with this instance. Go to **[Credit card application Dynamic media template for Securfinancial.](https://experience.adobe.com/#/@demosystem4/sname\:prod/journey-optimizer/content-templates/details/8b4e4a1f-d91c-4118-877a-cf9e11597cc1/email)** (You can have your own template copied to your instance, or you can duplicate this template.)
5\. Click on edit email body, and you can see the after the email body text you can add **HTML component**.
6\. Click on HTML Component and go to the code view tab by using \<> and go to **assets** from the left panel and go to **asset selector** and select the right **repository(Adobe Demo System Shared Program Dev 1)** from the drop down.
7\. Go to your folder and select the template you created in the above step. For now, we will go to the securFinancial folder and select the **credit card template.**
8\. Now go to the code view of the component, and in the **image URL, **you can see the **name parameter** that we created in the AEM template. Now, at the place of First name add the **first name** from **profile attributes** and similarly for** last name** in the **URL. **Also, give width = "60%" as an attribute in the img tag **and click on Save.**
9\. Now go to the main banner image and select the image from the **right panel image source**(Click on the person image) and go inside the personalization tab and now **add parameter \&smartcrop=169BANNER** this is smartcrop rendition for desktop images email. Also, under setting in from **left panel under Display options Show only on desktop devices.**
10\. Duplicate the same image and repeat the above step. Now we will have a rendition for mobile and **add parameter \&smartcrop=54VERT. **Also, under setting in from **left panel under Display options Show only on mobile devices. Click on save.**
11\. Now click on **simulate content **and select a test profile and see the content for mobile and desktop and you will see **different renditions of images** and also, you can see the **credit card will be personalised with test profile** First name and last name.
## Setup
### How to activate at your Sandbox( Smart Crop and Renditions):
Please follow the below steps to set this dynamic media feature on your AEM instance and integrate it with AJO. For now, we have showcased the steps at the **[ADSS AEM instance: AEM](https://author-p97303-e890303.adobeaemcloud.com/ui#/aem/aem/start.html) and [AJO Prod Sandbo](https://experience.adobe.com/#/@demosystem4/sname\:prod)x.**
1. First, go to your AEM instance. **Example:** [https://author-p97303-e890303.adobeaemcloud.com/ui#/aem/aem/start.html](https://author-p97303-e890303.adobeaemcloud.com/ui#/aem/aem/start.html)
2\. Click the **hammer** symbol and then **assets > image profiles **and check **smart-lock profile** is available.
3\. Select the **smart-crop profile** and in the top bar click on **Edit image processing profile** to check the smart-profile configuration are set correctly.
4\. Now go to **Assets > files** and create a folder with your name.
5\. Now go to the home page, click the **hammer** symbol, and then **assets > image profiles. **Select the **smart-lock profile **and, from the top bar, select **Apply processing profile to a folder **and select the folder that you have created in the previous step and click **apply.**
6\. So the configuration part is completed, and whenever you drop your images in the above folder, the **dynamic media processing** **workflow** will kick in and will create **smart-crop renditions** for the images, which we can utilize at the AJO email designer through the asset picker.
## NOTES:
1. *Dynamic media templates don't support smart crop renditions only images support smart crop renditions*.
## Assets:
For the base images of the card and SecurFinancial email templates.
::File{src="https://api.archbee.com/api/presign/5DDrYpNrf6iEJahKpoKSv-4hurQG-Mp4QUXTHdz2vR_-20250410-090731.zip" label="AEM_ASSETS.zip"}