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 RatioThumbnail 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 NameOne 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.jpgThe 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 Display 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 Display 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.
Use a Placeholder Video
Using videos on your web site or application creates a more engaging experience with your customers. Whether these videos are educational, advertising, or even product specific, videos are a great way to communicate and capture the attention of an audience. However, video files are generally much larger than images and take a bit of time to optimize on the first request in order to display to all the various formats and resolutions that your Image Manager video policy specifies. As an alternative to delivering the original version during this time period, we offer the ability to serve a placeholder video while the processing takes place. This placeholder video can be anything you’d like it to be. It could be a “please be patient while we make your video look its best” or simply a preview of an upcoming product, episode, or podcast – you are only bound by the limits of your imagination.
See Use a Placeholder Video to learn more.
Resize Images Dynamically to Exact Dimensions
While Image Manager makes it simple to resize images by hard coding dimensions or using predefined breakpoints, we can also dynamically resize images based on published dimensions. This is particularly useful if you want to allow a creative team to resize images without giving them access to Image Manager configurations.
A specific example of this, which is common with people who previously used ImageMagick, is publishing image dimensions in the URL path. Using a combination of Image Manager and Property Manager it’s possible to extract those dimensions and use them to dynamically resize images, all without having to change any existing URLs.
For example you can set up the following URL so it allows access to an image resized to exactly 900x600 pixels.
See Resizing Images Dynamically to Exact Dimensions to learn more.
Crop Around a Focal Point
As part of publishing an image, you may want to specify different focal points and crop around them in certain situations. For example, if you have a large image with a picture of a beach and palm trees, you might want to display a smaller image with a focus on just the palm trees when your customer views the image to a phone or a tablet. You may also want to display the entire image of the beach when your customer views the image to desktop. In a typical workflow, you would crop these images individually making two different versions of the same image. With Image Manager, you longer have to create two versions. Image Manager allows you to programmatically display the image you want using the Region of Interest Crop transformation. Here is the original image:
Here is the resulting image for a phone or tablet, where the region of interest encompasses both palm trees:
See Crop Around a Focal Point to learn more.