Use published dimensions to dynamically resize your images.
While Image and Video Manager makes it
simple to resize images by hard coding dimensions or using predefined breakpoints, it 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 and Video Manager configurations. A specific example of this is publishing image
dimensions in the URL path. Using both Image and Video 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.
The URL for the image must
be on your domain and contain image dimensions in the path:
It’s worth noting that in the example above, the desired width
(900px) and height (600px) of the resized image exist as virtual directories in the URL.
This means that those directories don’t actually exist at your origin. The URL of the source
image that Image and Video Manager requests looks something like this:
Here's the image
before and after dynamic resizing:
How to
Go to > CDN > Image and Video
Manager.
Select a contract and a policy set name,
then click Manage
Policies.
Click Add New Policy.
The Name
Your Policy window appears:
Enter Resize in the Policy Name field
and click OK.
The Image Policy Editor appears:
Add the Resize transformation by
expanding the Transformations section and select Resize.
Change the Fixed Value setting to
Variable for both the Width and
Height fields using the left/right arrows.
Select the Add Variable option from the dropdown. The Policy
Variables editor appears:
Create two new variables, one called width, and one called height (the value of these
variables will be populated by Property Manager in a later step). Also be sure to set
default values for both variables to account for cases where dimensions may not be present
in the image URL.
Under the Aspect Behavior setting select
Fill to size the image so it completely fills the given
dimensions. The resulting image is the smallest possible that is at least as large as both
the height and width specified.
Under the Constraint Type setting select
Downsize to ensure that resized images may only be the same size
or smaller than the source image (this prevents accidental enlargement of the source image
if incorrect dimensions are published in the URL).
At this point our Image and Video Manager policy is complete. There
is still some work that needs to be done in Property Manager to complete the setup though.
Locate the delivery configuration used to serve your images through Akamai and continue
with the steps below.
First create two Property Manager
variables, one called PMUSER_WIDTH and another called PMUSER_HEIGHT. We’ll be using these
to populate the Image and Video Manager variables for width and height that we created in
an earlier step.
Create a new child rule under your
default rule and call it IM
Variables. It’s important to note that this rule must come before the rule
containing your primary Image and Video Manager behavior in the rule tree, like so:
Extract the image dimensions from your URL and assign them to the PMUSER_WIDTH and
PMUSER_HEIGHT variables we just created using the Set Variable
behavior.
Assuming you use a consistent URL structure, based on our example URL
(https://www.friendlyfireworks.com/assets/900/600/sparkler.jpg) we can use the Path
Component Offset feature to extract our dimensions. Use an offset of 2 for the
PMUSER_WIDTH variable, and an offset of 3 for the PMUSER_HEIGHT variable.
Now link the Image and Video Manager
variables we created earlier to the Property Manager variables we just populated using the
Image Manager: Set
Parameter behavior:
We need an instance of this behavior for
each variable. For each set the Parameter option to Link IM Variable to Property
Variable. For the first behavior enter width (the name of our Image and
Video Manager variable) in the Image Manager Variable field and select PMUSER_WIDTH from the
Property Variable
dropdown. Do the same for the second behavior using height and PMUSER_HEIGHT
respectively.
Finally, we need to modify the path going back to origin. Remember, the dimensions in
the URL are virtual directories. Attempting to fetch the path /assets/900/600/sparkler.jpg
from origin would result in a 404. Remedy this by creating a new rule called Modify
Path:
Note: It is very important to restrict this rule to only images with dimensions in the
URL. Attempting to modify other URLs may result in 404s from your origin. In this
example we assume that all images under the assets directory have dimensions in the
path, so we can use a path match criteria on the /assets/* directory. This match may
need to be modified to suit your needs.
To remove the dimensions from the origin path use the Modify Outgoing
Request Path behavior. Using the current example we can replace the entire
path with /assets/{{builtin.AK_FILENAME}}, /assets/ being our image directory and
{{builtin.AK_FILENAME}} being a default variable representing the filename from the
incoming request. It is likely that this behavior may need to be modified to adhere to
your own unique file structure.
Example
Our setup is now
ready to use. Accessing the following URL will give us an image resized to exactly 900x600
pixels.
You can also create additional sizes by adjusting the
dimensions in the URL, without requiring changes to your Image and Video Manager policy or
delivery configuration. If you wanted to resize the same image to 400x267 pixels you could
do so by publishing the
URL
https://www.friendlyfireworks.com/assets/400/267/sparkler.jpg,
which would result in the following image: