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.