Accessing Image Representations

A field defined in this way in the content-type resource will be presented as a complex field (that is, a map) in PresentationArticle beans. Each item in the map holds a representation, indexed by its name. To access the representations in a PresentationArticle bean containing a content item of the type defined above, for example, you could use the following expressions:

${image.fields.representations.value.thumbnail}
${image.fields.representations.value.narrow}
${image.fields.representations.value.wide}

Each representation is itself a map containing the following fields:

width

The width of the crop mask in pixels.

height

The height of the crop mask in pixels.

sourcewidth

The width of the original image in pixels (only present in derived representations).

sourceheight

The height of the original image in pixels (only present in derived representations).

href

The URL of this representation.

crop

Information about the crop mask.

To include an image representation in a template, therefore, you would do something like this:

<img
   src="${image.fields.representations.value.thumbnail.href}"
   width="${image.fields.representations.value.thumbnail.width}"
   height="${image.fields.representations.value.thumbnail.height}"/>

The sourcewidth and sourceheight values included in derived representations makes it possible to calculate how much of the original image is included in the representation. This information might be used to estimate the probable quality of the cropped image and determine how it is presented in the output.