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

Follow

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:

    mceclip0.png

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

  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
Parameters:
W: width - int
H: height - int
C: crop
o
1: scale
o
2: resize and fill white
o
3: crop
Q: quality – int (1-100), default is 80
F: foreground – hex (i.e. 000000 – black)
Parameters:
W: width - int
H: height - int
C: crop
o
1: scale
o
2: resize and fill white
o
3: crop
Q: quality – int (1-100), default is 80
F: foreground – hex (i.e. 000000 – black)

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

 

Supported file types

Media URL Based Transcoding supported the following file types .jpg, jpeg, .png, .gif 

0 out of 0 found this helpful

Comments

0 comments

Please sign in to leave a comment.