Use query string parameters to change images

Let your web developers apply artistic transformations to individual images using an IMQuery string.

The IMQuery transformation lets you control which transformations are possible using an IMQuery string. Developers can only apply the transformations you’ve added to the policy on a per image basis by appending the image URL with an IMQuery string. This is particularly useful if you want to allow a creative team to apply transformations without giving them access to Image and Video Manager configurations.

In this recipe we'll add the Background and Crop transformations to our policy so developers can change the background color and size of an image using an IMQuery string.

In this example we changed the background color from white to green by appending the image URL with this query string:
https://www.akalunch.com/sandwichspecial/ham.png?im=BackgroundColor=abab50

To control image transformations using IMQuery, locate the URL of the image. The image URL for this image is:

https://www.akalunch.com/sandwichspecial/ham.png.

How to

  1. Go to > CDN > Image and Video Manager.
  2. Select a Contract and a Policy Set Name, then click Manage Policies.
  3. Click Add New Policy.
    The Name Your Policy window appears:
  4. Enter the policy name in the Policy Name field and click OK. In our case, we entered IMQuery_Resize_Background.
    The Image Policy Editor appears.
  5. After specifying Image and Quality Settings, add the IMQuery transformations by expanding the Transformations section and selecting IMQuery.

    The IMQuery configuration screen appears.

  6. For this policy, we are only going to allow the Background Color and Resize transformations.
    Note: Leave the default variable of 'im' in the Query Parameter variable field. The Query Parameter is used in IMQuery strings when applying the allowed transformations.
  7. Save and test your policy on staging and then push it to production when it's ready.

What you should see

Now that we have configured the IMQuery_Resize_Background transformation, we can control the size and background color for our image simply by changing the IMQuery string parameter.

For more information about the IMQuery string syntax for each Image and Video Manager transformation review the Syntax and Examples section in the Image and Video Manager Help.

To resize the image to 200x200 pixels and change the background color to green, update the query string to:

https://www.akalunch.com/sandwichspecial/ham.png?im=Resize=(200,200);BackgroundColor=abab50

Here's the updated image:

To resize the Image to 300x300 pixels and change the background color to blue, update the query string to:

https://www.akalunch.com/sandwichspecial/ham.png?im=Resize=(300,300);BackgroundColor=507eab

Here's the updated image:

Next steps

For more information about adding IMQuery transformations, see the Image and Video Manager Help.