Alternative Image Versions

Most publications are set up to support multiple versions of images in different shapes and sizes for use in different contexts. You might want, for example, a large version for displaying in articles, a small version for displaying in headline teasers and a thumbnail version for displaying in other teasers; or landscape and portrait versions for displaying in wide column and narrow column layouts. Each version has a predefined width, height or width and height, specified in pixels. A "landscape" version might be defined as 500 pixels wide and 400 pixels high, for example, a "portrait" version defined as 400 pixels wide and 500 pixels high, and a "narrow" version defined as 300 pixels wide but with no fixed height.

Usually these alternative versions will be displayed on a separate tab in the content editor, for example:

graphics/alternative-image-versions-annotated.png

The alternative images tab contains one copy of the image for each version that has been defined. Superimposed over each image is a crop mask.

If an alternative version defines both width and height, then its crop mask has a fixed aspect ratio, which means that you can resize it and move it, but not change its shape. If it only defines one dimension (height or width), then you can also change the shape of the crop mask.

The crop mask is initially set to include as much of the base image as possible, and is centered.

If you click inside one of the crop masks then it is highlighted, and yellow handles appear at each corner. You can then:

  • Resize/reshape the crop mask by dragging on the handles

  • Move the crop mask by placing the mouse pointer inside it and dragging

In this way you can select which part of an image is to appear in each of the versions.

When you change the size of a fixed-aspect ratio crop mask, you do not affect the size of the image version in the publication, you simply select what is to appear in it. Whatever you select is scaled up or down to fill the image version's predefined area. Similarly, whatever selection you make for a fixed width/height version is scaled up or down to fit the predefined width or height.