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.