Image Derivatives (Automatic Image Resizing)

Image Derivatives, otherwise known as Automatic Image Resizing, is a powerful feature available in Advantage CSP that allows users to save time and money when it comes to managing an organization's digital assets across numerous devices and interfaces.

First, you will need to set the parameters of the image sizes for the various devices you would like to resize an image for, ie. Phone, Tablet, Desktop, etc.

To do this complete the following steps:

1. Go to Domain Management and then select Configuration Settings in the navigation menu.
2. Go to the System tab on the top left.
3. Click on the Pencil icon to edit Image Configuration.
4. There you will see the default settings; Thumbnail, Mobile, Tablet. Ensure that each size is enabled by making sure the green check mark is activated. In this example the defaults are set to not active, but some will be turned on after we create a new size.
   
5. To add a new size, click on Add.
6. Give your new derivative a name and dimensions. Click Update and then click Save in the top right corner and you're done adding a new derivative.
   
7. The newly created derivative Travel Section in the example has been set to active and the Thumbnail has also been marked active, you must now click Save again in the top corner and now you can use these to resize an image on your site.
   

Resize your Image

Typically you will access the derivatives through either the Page Manager or Content Manager where you have images in your content.

1. Select your image from where it was added to in your content tool by clicking on Select at the bottom of the image. In this example the original image was in an article on travel and was too large to display properly.                                                                                                     
2. The Image manager opens in another window and you will see the Create Derivatives drop-down menu. This is where you can select the derivative you created earlier or use one of the defaults. Here we will use the Travel Section derivative by clicking on it.
3. You will notice that the derivative is created and named in the folder below the original image. Now you must click on it so it appears in the editor at the bottom and then click Select at the top right. The Image Manager closes and you return to the article.
4. Back in the article you now have an image that will fit properly into the article, the final step is to select Publish and then click on Publish It!.