The Asset Transformer module provides a simple yet powerful way for clients to use repurposed versions of images stored in their Asset Bank on their public-facing websites.

Benefits:

• You need to store only one high-resolution version (i.e. the ‘master’ copy) of each image in Asset Bank. The repurposed versions are created on the fly as needed.
  
  
• Crop areas can be positioned for each asset, to ensure you get the best crop for each repurposed image.
  
  
• The repurposed images are served from a CDN (Content Delivery Network) meaning they are delivered quickly and reliably, with no dependency on your Asset Bank (once the images have been cached). Therefore it is ideal for mission-critical websites.
  
  
• You can programmatically construct the URL of each repurposed image, using the predefined crop/size identifier and the asset ID (which can be obtained from a REST API search). 

Configuring the predefined sizes

Users can define the crop sizes, representing the sizes they need in external applications, for example on their website:

Selecting the crop areas for each asset

Assets first need to be made available for cropping. This allows you to decide which ones qualify (e.g. product images, but not images of staff). To mark assets as available for the Transformer Module you need to set the 'Available to Asset Transformer?' attribute to 'Yes' - e.g. on upload or via a bulk update of the assets in question.

Users will then see “Edit Crops” button on the Asset Details page. 

The Edit Crops button appears when you have allowed it via the attribute 'Available to Asset Transformer?'

When users click to edit the crops, they see a page that enables them to select a rectangular area for each of the predefined crop sizes, to specify which part of the image should be cropped.

To prevent all assets in the Asset Bank from being made publicly available, an attribute “Available to Asset Transformer” can be set to “Yes” or “No”. This would be set to “Yes” for the assets you want to use on your website.

NB: If you would like a non-admin user to access Asset Transformer, simply add them to Asset Transformer user Group that would be automatically created when this feature is enabled. 

Obtaining the images for your website

In your website code, the resized and cropped images are obtained by calling a URL in the following format:

[base-url]/conversion/[crop-identifier]/assets/[asset-id]

Or

[base-url]/conversion/[crop-identifier]/assets/findByAttribute?id=[attributeId]&value=[attributeValue]

The first time the URL is called, the source file in Asset Bank is used to create the resized, cropped, web-ready version which is stored in Amazon S3. This is then cached in Amazon CloudFront and served from there, so subsequent calls will be extremely fast.

For example:

https://d363suj4pdptk4.cloudfront.net/externalApps/4993372d-47ea-4743-a5b3-c2c4cd080da3/conversion/home-page-hero/assets/14486

https://d363suj4pdptk4.cloudfront.net/externalApps/4993372d-47ea-4743-a5b3-c2c4cd080da3/crops/home-page-mobile/assets/14486

If you haven’t manually defined a crop, Asset Transformer will perform an autocrop where the crop is centred and takes up as much of the image as possible. Assets still need to have “Available via Asset Transformer” set to “Yes”.

An example of the autocrop behaviour when no crop has been set

Additional options for web optimisation

JPEG Quality

The default compression for JPEG images retrieved by Asset Transformer is 70% but if you wish to define your own you can append your URL with the q parameter. For example:

https://d363suj4pdptk4.cloudfront.net/externalApps/d28a0c14-8260-4d8d-8715-b88c10e4df59/conversion/CoverPage/assets/14124 

will return a JPEG at the default 70% compression and a file size of 255kb but the URL

https://d363suj4pdptk4.cloudfront.net/externalApps/d28a0c14-8260-4d8d-8715-b88c10e4df59/conversion/CoverPage/assets/14124?q=60

will return the image at 60% compression, with a resulting file size of 136kb.

File Format

 If you wish to retrieve the image in a PNG or WEBP format to maintain transparency you can append the URL with the extension of the format. For example:

https://d363suj4pdptk4.cloudfront.net/externalApps/d28a0c14-8260-4d8d-8715-b88c10e4df59/conversion/CoverPage/assets/14124.png

will return the image in a PNG format and

https://d363suj4pdptk4.cloudfront.net/externalApps/d28a0c14-8260-4d8d-8715-b88c10e4df59/conversion/CoverPage/assets/14124.webp

will return it in a WEBP format. Note, the WebP format also supports the same quality parameter as described in JPEG Quality above.

Updating an image

A user with requisite permissions can upload a new version of a file to Asset Bank, then review the Asset Transformer crops/re-sizes page for that asset, make any adjustments and then click save. This will then reflect on any website the image appears on via the Asset Transformer URL.

Known limitations

Asset Transformer does not support EPS files as input for transformation.