Integrate Asset Selector for Dynamic Media with OpenAPI capabilities
The rootPath and path properties should not be a part of the Dynamic Media with OpenAPI capabilities. Instead, you can configure the aemTierType property. Following is the syntax of configuration:
aemTierType:[1: "delivery"]
This configuration allows you to view all the approved assets without folders or as a flat structure. For more information, navigate to aemTierType property under Asset Selector properties.
Create a Dynamic Delivery URL from approved assets
Once you set up Asset Selector, a schema of objects is used to create a Dynamic Delivery URL from the selected assets.
For example, a schema of one object from an array of objects that is received upon the selection of an asset:
{
"dc:format": "image/jpeg",
"repo:assetId": "urn:aaid:aem:xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx",
"repo:name": "image-7.jpg",
"repo:repositoryId": "delivery-pxxxx-exxxxxx.adobe.com",
...
}
All the selected assets are carried by handleSelection function that acts as a JSON object. For example, JsonObj. The dynamic delivery URL is created by combining the below carriers:
| Object | JSON |
|---|---|
| Host | assetJsonObj["repo:repositoryId"] |
| API root | /adobe/dynamicmedia/deliver |
| asset-id | assetJsonObj["repo:assetId"] |
| seo-name | assetJsonObj["repo:name"].split(".").slice(0,-1).join(".") |
| format | .jpg |
Approved assets delivery API specification
URL format:https://<delivery-api-host>/adobe/dynamicmedia/deliver/<asset-id>/<seo-name>.<format>?<image-modification-query-parameters>
Where,
- Host is
https://delivery-pxxxxx-exxxxxx.adobe.com - API root is
"/adobe/dynamicmedia/deliver" <asset-id>is Asset identifier<seo-name>is name of an asset<format>is the output format<image modification query parameters>as support by the approved assets’ delivery API specification
Approved assets delivery API
The dynamic delivery URL possesses the following syntax:https://<delivery-api-host>/adobe/assets/deliver/<asset-id>/<seo-name>, where,
- Host is
https://delivery-pxxxxx-exxxxxx.adobe.com - API root for Original Rendition Delivery is
"/adobe/assets/deliver" <asset-id>is asset identifier<seo-name>is name of the asset that may or may not have an extension
Ready to pick dynamic delivery URL
All the selected assets are carried by handleSelection function that acts as a JSON object. For example, JsonObj. The dynamic delivery URL is created by combining the below carriers:
| Object | JSON |
|---|---|
| Host | assetJsonObj["repo:repositoryId"] |
| API root | /adobe/assets/deliver |
| asset-id | assetJsonObj["repo:assetId"] |
| seo-name | assetJsonObj["repo:name"] |
Below are the two ways to traverse the JSON object:
-
Thumbnail: Thumbnails can be images and assets are PDF, video, images, and so on. Although, you can use the height and width attributes of an asset’s thumbnail as the dynamic delivery rendition.
The following set of renditions can be used for the PDF type assets:
Once a pdf is selected in sidekick, the selection context offers the below information. Below is the way to traverse the JSON object:You can refer to
selection[0].....selection[4]for the array of rendition link from the above screenshot. For example, the key properties of one of the thumbnail renditions include:{ "height": 319, "width": 319, "href": "https://delivery-pxxxxx-exxxxx-cmstg.adobeaemcloud.com/adobe/assets/urn:aaid:aem:8560f3a1-d9cf-429d-a8b8-d81084a42d41/as/algorithm design.jpg?accept-experimental=1&width=319&height=319&preferwebp=true", "type": "image/webp" }
In the above screenshot, the delivery URL of the PDF’s original rendition needs to be incorporated in the target experience if PDF is required and not its thumbnail. For example, https://delivery-pxxxxx-exxxxx-cmstg.adobeaemcloud.com/adobe/assets/urn:aaid:aem:8560f3a1-d9cf-429d-a8b8-d81084a42d41/original/as/algorithm design.pdf?accept-experimental=1
-
Video: You can use video player URL for the video type assets which uses an embedded iFrame. You can use the following array renditions in the target experience:
{ "height": 319, "width": 319, "href": "https://delivery-pxxxxx-exxxxx-cmstg.adobeaemcloud.com/adobe/assets/urn:aaid:aem:2fdef732-a452-45a8-b58b-09df1a5173cd/as/asDragDrop.2.jpg?accept-experimental=1&width=319&height=319&preferwebp=true", "type": "image/webp" }You can refer to
selection[0].....selection[4]for the array of rendition link from the above screenshot. For example, the key properties of one of the thumbnail renditions include:The code snippet in the above screenshot is an example of a video asset. It includes renditions links array. The
selection[5]in the excerpt is the example of image thumbnail which can be used as the placeholder of video thumbnail in the target experience. Theselection[5]in the renditions’ array is for the video player. This serves an HTML, and can be set assrcof the iframe. It supports adaptive bitrate streaming which is web-optimized delivery of the video.In the above example, the video player URL is
https://delivery-pxxxxx-exxxxx-cmstg.adobeaemcloud.com/adobe/assets/urn:aaid:aem:2fdef732-a452-45a8-b58b-09df1a5173cd/play?accept-experimental=1
