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.
- 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
Admin 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 with edit permission on an asset will then see a button “Edit Crops” on the Asset Details page, and also as a rollover on every thumbnail on the search results page.
The Edit Crops button appears when you have allowed it via the attribute 'Available to Asset Transformer?'
When they 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 via 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.
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:
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.
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
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:
will return a JPEG at the default 70% compression and a file size of 255kb but the URL
will return the image at 60% compression, with a resulting file size of 136kb.
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:
will return the image in a PNG format and
will return it in a WEBP format.
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 within 24 hours (there is a delay due to the caching of the image via Content Delivery Networks).