How to Retrieve a Thumbnail for an Image using Querystrings in the URL

There are times when images need to be used across devices with different size restrictions. Instead of creating multiple image fields for each image size, Agility provides a way for developers to request a specific image size from an image asset in their code.

Agility offers Media URL Based Transcoding which provides the ability for images that are stored in Agility Media to be transformed into thumbnails via a URL request.

To retrieve a thumbnail from your image:

1. Upload an image to Agility Assets:

   

2. Get the image URL by left-clicking the image and clicking on 'Copy URL' from drawer popup:

3. In for my image the URL returned is:

   https://5e2f49c9-cdn.agilitycms.cloud/test.png

   
   

4. To transform the image we have the following parameters available:

   • W: Set the width - number 
   • H: Set the height - number 
   • C: Perform an action on the image by passing in the number values below:
     • 1: scale
     • 2: resize and fill white
     • 3: crop
   • Q: Quality - (1-100) the quality of the image as a percentage of the original asset

Examples

1. Set width of thumbnail (scales height automatically according to native ratio)
   https://5e2f49c9-cdn.agilitycms.cloud/test.png?w=200
   
   
2. Crop image to 200x200
   https://5e2f49c9-cdn.agilitycms.cloud/test.png?w=200&h=200&c=3
   
   
3. Scale image to 200x200 and fill remaining space
   https://5e2f49c9-cdn.agilitycms.cloud/test.png?w=200&h=200&c=2