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:
Now create a policy in Image Manager called ResizeImageforGrid that resizes this image to fit in a square grid:
- Go to .
- Select a Contract and a Policy Set Name, then click Manage Policies.
Click Add New
The Name Your Policy window appears:
Enter ResizeImageforGrid in the
Policy Name field and click
The Image Policy Editor appears.
Add the Resize transformation to
your Workflow section.
- Select Downsize in the Type field to resize the image only if the resulting image is smaller than the original image.
- 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.
- 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.
Add the Crop transformation to
your Workflow section.
- Enter 150 and 150 to set the square size of your image in the Width and Height fields.
- Indicate placement of the crop box by selecting Center in the Crop Gravity field. This shows where you want to crop the image.
- Set Allow Expansion to Yes to extend the borders of the original image to encompass the entire crop box.
Update in the Preview pane. The following image
- Add the Background Color transformation to your Workflow section to fill in the top and the bottom of the image with a color.
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
- Click Save and Test on Staging and go to the URL for the image on your staging web site.
Apply the impolicy query string
parameter to the end of the URL as follows:
The image now appears in your image grid:
For more information about adding artistic transformations to images, see the Image Manager Help.