Transformation templates

About transformation templates

Transformation templates contain a list of Dynamic Media parameters that are added to your account and referenced by name in your image URLs. Using transformation templates has the following advantages:

  • An image URL can be quite complex, especially if you are using features such as layers or point of interest. Transformation templates allow you to simplify your image URLs.
  • With transformation templates, it easy to apply the same Dynamic Media parameters to multiple image URLs. You can simply include the transformation template in each of the URLs.
  • If you want to change some of the parameters in a transformation template, you can simply update and re-publish the template and the changes will be applied, without having to update your website code.

On this page we'll show you how to create, update and use transformation templates.

For more information about Dynamic Media parameters see the Dynamic Media parameter reference and try them out on the Dynamic Media playground.

Creating a transformation template

To create a transformation template go to Content Hub and choose "Transformation templates" from the Tools section (1). Click the "Create template" (2) button to start creating a new template.

Transformation templates are shown in the tool section of Content Hub.
Transformation templates are shown in the tool section of Content Hub.

Give the template a name and a label. You'll use the name to refer to the template in the image URL and the label identifies the template in the list. In this example we'll name the template "example-template".

Creating a template with the name example-template
Creating a template with the name example-template

Adding parameters from the shortcut menu

To add the first parameter to your template click the "Add parameter" button.

Adding a parameter from the shortcut menu
Adding a parameter from the shortcut menu

A row is added to the parameter list. You can click "Select parameter" to choose a parameter to add from the menu. We've included the most commonly used parameters such as width, height, format and quality. In this example we'll choose width and set its value to 300.

The parameter is added to the list. As each parameter is added, the template URL is updated.

Giving the parameter a value. In this case setting the image width to 300.
Giving the parameter a value. In this case setting the image width to 300.

The "Add to top" and "Add to bottom" buttons allow you to add parameters to the start or end of the URL respectively.

If we add choose another parameter, then it will be added to the template URL. In the example below, the format parameter is added by clicking "Add to bottom" and adding the parameter to the end of the list.

Adding another parameter, in this case format.
Adding another parameter, in this case format.

The format of the image is set to PNG.

Setting the format to PNG. The parameters are shown in the list and in the full URL is shown in the Template URL box.
Setting the format to PNG. The parameters are shown in the list and in the full URL is shown in the Template URL box.

Adding parameters manually

You can add parameters either by choosing them from the shortcut menu, or by typing the parameters directly in the template URL box. In the example below we're rotating the image by 90 degrees. Rotate is not included in the parameters menu so we type it directly into the template URL box.

When a parameter is added to the template URL it's automatically parsed and added to the parameter list underneath. This makes it easier to view each parameter separately.

Note that you can add any of the parameters defined in the Dynamic Media parameter reference, but no syntax checking is applied, so it is a good idea to test your combination of parameters before using your template.

Adding a parameter directly in the Template URL box, in this example rotate=90 is added.
Adding a parameter directly in the Template URL box, in this example rotate=90 is added.

In the more complex example shown below we're making use of the Dynamic Media Point of Interest (POI) feature and adding the scaleFit parameter to crop the image using the POI metadata. Separating out the parameters makes it easier to view and identify any problems.

A more complex example using POI metadata added to a template.
A more complex example using POI metadata added to a template.

Changing the order of parameters

It's easy to change the order of parameters by clicking and dragging the icon to the left of the parameter in the list and dragging it to its new location. In the example shown below, we're changing the order of the rotate parameter in the parameter list.

You can change the order of parameters in a template by clicking the icon to the left of the parameter and dragging it to its new location.
You can change the order of parameters in a template by clicking the icon to the left of the parameter and dragging it to its new location.

Saving and publishing transformation templates

Transformation templates must be published in order to use them. Once you've finished adding parameters to the template, click the "Save and publish" button to save a template and make it available to include in your URLs.

Click Save and Publish to publish the template so it's available to include in your image URLs.
Click Save and Publish to publish the template so it's available to include in your image URLs.

Note that if you make a change to a transformation template and save it, it must be re-published in order for the changes to be available. Once saved, the template will be shown on the transformation templates landing page.

Viewing and editing transformation templates

From the landing page you can open, publish, copy and delete transformation templates by right-clicking and choosing options from the template's contextual menu.

From the transformation templates landing page you can view, publish, copy and delete templates and sort the list.
From the transformation templates landing page you can view, publish, copy and delete templates and sort the list.

The template list can be sorted by name, label, creation and modification dates and you can also use search.

Using transformation templates

To use a transformation template in your image URL, just reference it by name within "$" characters. For example, to apply the example-template to the image of a woman in a field, we would use the following URL:

https://cdn.media.amplience.net/i/ampproduct/womaninfield?$example-template$

The width of the image is set to 300, it's returned in PNG format and rotated 90 degrees.

An image with the transformation template applied.
An image with the transformation template applied.

You can use multiple templates in the same URL and combine it with other Dynamic Media parameters.

https://cdn.media.amplience.net/i/ampproduct/womaninfield?$example-template$&$fliptest$

Usage notes

  • In order to use transformation templates with staged content using virtual staging environments, the templates must be published first.

  • No syntax checking is performed on the transformation template when saved, so we recommend testing the parameters out before publishing the template.

Dynamic Media parameter reference

Dynamic Media playground