Resize images to fit an image grid

Resize pristine images to fit into an existing image grid in your application or on your web site.

Product category pages are a great example where images of the same size appear in multiple rows and columns, all of the same dimension. Using Image and Video Manager you can automatically resize an image to fit your product category page. This reduces the number of images you need to store and maintain for your site.

For this recipe we'll use three transformations. The Resize transformation lets you reduce an original image down to fit in, for example, to a square grid. The Crop transformation lets you cut an image down to an area you specify. The Background Color lets you and specify a background color to fill in any space not occupied by the image.

Here's the image before and after you resize it for your image grid. We also added red a background color to fill the top and bottom areas of your image:

To resize an image to fit into an image grid in your application or web site, locate the URL of the image. For example, the URL for this image is:

https://www.travelanywhere.com/Place_Archive/0503/palmbeach.jpg

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 ResizeImageforGrid in the Policy Name field and click OK.
    The Image Policy Editor appears.
  5. Add the Resize transformation by expanding the Transformation menu and selecting Resize.
  6. Configure the Resize Transformation.
  7. Select Downsize in the Type field to resize the image only if the resulting image is smaller than the original image.
  8. In our example, we want to create a square image in the size of 150x150. Enter 150 and 150 to set the square size of your image in the Width and Height fields.
  9. Select Fit in the Aspect field to preserve the aspect ratio of the image, but create the largest size image that fits entirely within these dimensions.
  10. Add the Crop transformation to your Workflow section.
  11. Enter 150 and 150 to set the square size of your image in the Width and Height fields.
  12. Indicate placement of the crop box by selecting Center in the Crop Gravity field. This shows where you want to crop the image.
  13. Set Allow Expansion to Yes to extend the borders of the original image to encompass the entire crop box.
  14. Click Update in the Preview pane. The following image appears:
  15. Add the Background Color transformation to your Workflow section to fill in the top and the bottom of the image with a color.
  16. Enter a color that matches the look and feel of your web site, for our example we chose red, #f00, in the Color field. Click Update in the Preview pane. The following image appears with the resized image in a square that fits inside your image grid and with red in the space that the image does not occupy:
  17. Click Save and Test on Staging and go to the URL for the image on your staging web site.
  18. Apply the impolicy query string parameter to the end of the URL as follows: https://www.travelanywhere.com/Place_Archive/0503/palmbeach.jpg?impolicy=ResizeImageforGrid
    The image now appears in your image grid:

Next steps

For more information about adding artistic transformations to images, see the Image and Video Manager Help.