What is the Cookbook?

The Image Manager Cookbook is a collection of the most popular recipes. The recipes are common tasks that you do in Image Manager. Have fun browsing through the recipes to see what Image Manager has to offer!

Add a Watermark

You can add a watermark to any image with Image Manager. For example, this allows you to place your company’s logo on an image. Do this by creating a policy called “Watermark” in Image Manager and then specifying that policy as a query string parameter on your web site.

Here’s the original image:

Here is the same image after you apply a watermark:



You can add a watermark to any image.

See Add a Watermark for more information on how to add a watermark.

Crop an Image

You can crop any image with Image Manager. Cropping allows you to cut an original image down to a selection of the image for certain web pages. Do this by by creating a policy called "Crop" in Image Manager and then specifying that policy as a query string parameter on your web site.

Here’s the original image:

Here is the image after you crop it:

See Cropping an Image for more information on how to crop.

Resize an Image to Fit in an Image Grid

You can resize any image to fit in an existing image grid in your application or on your web site using a single pristine image with Image Manager - which can reduce the number of images you need to store and maintain. Product category pages are a great example of where you see the need to have multiple rows and columns of images all of the same dimension. This allows you to cut an original image down to fit in, for example, a square grid and specify a background color to fill in any space not occupied by the image. Do this by creating a policy in Image Manager that uses the Resize, Crop, and Background Color transformations, and then specifying that policy as a query string parameter on your web site.

Here’s the original image:

Here is the image after you resize it for your image grid and add red background color to fill the top and bottom areas of your image:

See Resize an Image to Fit in an Image Grid for more information on how to resize your image to fit in a grid.

Create a Thumbnail Retaining the Original Aspect Ratio

Thumbnail images can be created easily with Image Manager. A thumbnail image is just a small scaled version of a pristine source image. To create a thumbnail image with the same aspect ratio as the original image, first create a Policy called “thumbnail” in Image Manager Policy Editor. You can call this Policy using a custom rule in your delivery configuration or specified as a query string parameter in the requesting URL.

Here is the original image:

Here is the same image after creating a thumbnail:

See Create a Thumbnail Retaining the Original Aspect Ratio for more information on how to create a thumbnail.

Display Images using the Path or File Name

One way to display an image is to use either the path or file name to tell Image Manager to use the policy you created. You can do this if your site happens to follow a file path or file naming convention that is similar to the following example. If you have a URL such as:

https://www.secretakamaibeaches.com/destinations/thumb/beach_thumb.jpg

The file beach_thumb.jpg is under a file directory called thumb and even has thumb in the file name itself. This allows you to leverage it within your delivery configuration. Many people structure their web sites this way to keep assets organized.

See Displaying Images Using the Path or File Name for more information on how to display images using the path or file name.

Create a Mobile Friendly Hero Image from a Larger Desktop Version

You can create a mobile friendly hero image using the same hero image you used on the desktop version of your site. This allows you to utilize the same source image, but modify it for the best viewing experience on mobile, you can simplify the number of assets to maintain while making it visually appealing and keeping the content aligned. That large hero image on your desktop site may be perfect, but on a mobile device the full screen image is going to be too small to appreciate and loose the visual punch you want. You can utilize a subset of that same original image that better suits the smaller view. Doing this is easy with Image Manager. Create a policy called “mobile_hero” in Image Manager, then specify that policy as a query string parameter on your web site. Here’s the original image:

Here is the same image after you create a mobile friendly hero image:

See Displaying Images Using the Path or File Name for more information on how to create a mobile friendly hero image of any larger desktop version on the same image.

Add a Text Overlay to an Image

You can easily add a text overlay to an image with Image Manager. Using a text overlay allows the text to stay crystal sharp no matter the size to which you scale the image. You can use a text overlay to share sale prices, announce a new product, or highlight any exciting information. To create an image with a text overlay, first create a policy called “text_overlay” in Image Manager. You can then specify this policy through a custom rule in your delivery configuration, or as a query string parameter in the requesting URL.

Here is the image you want to place the text on:

Here is the same image after creating a text overlay:

See Add a Text Overlay to an Image to learn more.