Resize an Image to Fit in an Image Grid

Before you begin

To resize an image to fit into an image grid in your application or web site, locate the URL of the image you want to fit in an image grid. For example, if you want to resize the following image:

Find that the URL for this image is:

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

Now create a policy in Image Manager called ResizeImageforGrid that resizes this image to fit in a square grid:

How to

  1. Go to > CDN > Image 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 to your Workflow section.
  6. Select Downsize in the Type field to resize the image only if the resulting image is smaller than the original image.
  7. 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.
  8. 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.
  9. Add the Crop transformation to your Workflow section.
  10. Enter 150 and 150 to set the square size of your image in the Width and Height fields.
  11. Indicate placement of the crop box by selecting Center in the Crop Gravity field. This shows where you want to crop the image.
  12. Set Allow Expansion to Yes to extend the borders of the original image to encompass the entire crop box.
  13. Click Update in the Preview pane. The following image appears:
  14. Add the Background Color transformation to your Workflow section to fill in the top and the bottom of the image with a color.
  15. 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:
  16. Click Save and Test on Staging and go to the URL for the image on your staging web site.
  17. 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 Manager Help.