Templates

Templates are a way to abstract a set of transformations.

You can have a transformation with 1 or more parameters and give it a name. Now you can reference it in your url and all the transformations will be applied. You can append even more transformations on top of it. The template will protect the transformations it contains and will not allow overrides on them.

Some examples to re-affirm the above statements:

Template name: medium => &width=240&height=240

/v2/token/alias/image.png?template=medium will yield an image 240x240

/v2/token/alias/image.png?template=medium&flop=1 will yield an image 240x240 and flipped horizontally

/v2/token/alias/image.png?template=medium&width=300 will yield an image 240x240. The template has protected the width from being overriden.

Use Case Product images

When you identify a transformation pattern that you are using in multiple places, it may be a sign that a template can come into play.

For instance, common transformations that come in handy for an e-commerce website are:

• small — &width=90&height=90&quality=60
• medium — &width=240&height=240&quality=80
• large — &width=600&height=600&quality=90
• zoom — &width=1200&height=1200&quality=90

A small variant of your product image for a listing page.
A medium variant to show a preview or initial detail.
A large variant to display the product to the user.
A zoom variant for when the user decides to “zoom-in” for better appreciation.

You can setup these three/four templates in your product images alias and give each the appropriate width, height, and quality.

Now from your website, instead of requesting an image with ?width=90&height=90&quality=60, you can instead do ?template=small.

Some possible benefits

You can simplify image transformations by adding template definitions to your aliases.

templates also provide some form of standardization/conventions across your website.

When multiple people do updates and maintenance on the content, templates can reduce a lot of miss-communications.

Provide ease of management like in the following scenario:

Consider a template named thumb that resizes images to 90x90.
Your website markup will contain the thumb template name reference. Imagine using this template in multiple places in your website, and then deciding to change thumbnail sizes to 120x120 instead. It becomes an easy modification as you only have to update the template transformation instead of multiple places in the website markup.