You may add images to Content Types using either Binary fields or Image fields. You may display images and access the properties of the image using both types of fields, but the methods to view and access image properties varies depending on which type of field is used.
When accessing a Binary field, you may access several helper properties and methods to easily generate URLs which retrieve different versions of the image, including the image thumbnail, raw and resize exporters:
rawUri | The "raw" version of the image (as it's stored in the system, with no filters applied). |
getResizeUri(w, h) | The image resized to the specified width (w) and height (h), as integers. |
resizeUri | The image with the resize parameters (e.g. /filter/Resize) added to the end, but without the width and height filters specified. |
getThumbnailUri(w, h, bg) | A thumbnail version of the image, with the specified width (w) and height (h) as integers, and a string representing RGB background color (bg) in decimal — e.g., black as 000000000, white as 255255255. |
thumbnailUri | A thumbnail version of the image, with default width and height. |
path | The path in the folder system for that fileAsset. |
title | The fileName of the fileAsset. |
| Access Method | Example Velocity Code | Example Result |
|---|---|---|
| "Shorty" ID | $content.shorty | f29effee9b |
| "Shorty" URL | $content.shortyUrl or $content.fieldVar.shortyUrl | /dA/f29effee9b/bm-logo.png |
| "Shorty" URL using inode (instead of identifier) | $content.fileAsset.shortyUrlInode | /dA/468bdf6d30/bm-logo.png |
When there are multiple Image fields or multiple Binary fields in the same Content Type, retrieving a URI from the properties of the content item itself (rather than from the named field of the content item) will return the appropriate URI of the first field of the appropriate type within the Content Type.
For example, if a Content Type has two Image fields, with Velocity variable names of screenshot1 and screenshot2, and a URI is retrieved from the content object directly (such as by using the $content.shortyUrl property), the URI returned will be the URI of the screenshot1 field.
To access the URI of a specific Image or Binary field, you can specify the name of the field when accessing the property. For example, to access the URI of the screenshot2 field, you would access $content.screenshot2.shortyUrl.
The following examples demonstrated how to display images in Binary fields and Image fields while iterating in Velocity over the following Content Type:
The following example assume that the a Velocity variable named content has been set to point to a File Asset content item, as in the following code:
#set($content = $dotcontent.find(/dA/b7a37682-fc7d-4aef-954e-339b4e1740ff/diagram1)| Access Method | Velocity Code | Example Result |
|---|---|---|
| "Shorty" ID | $content.shorty | f29effee9b |
| "Shorty" URL | $content.shortyUrl or $content.fileAsset.shortyUrl | /dA/f29effee9b/bm-logo.png |
| "Shorty" URL using inode (instead of identifier) | $content.fileAsset.shortyUrlInode | /dA/468bdf6d30/bm-logo.png |
In the following examples, the variable name of the Binary field in the Content Type is "image".
Note: When any of these methods are used on a Content Type with multiple Binary fields, the ID or URL returned is always the one from the first Binary field on the Content Type.
| Access Method | Velocity Code | Example Result |
|---|---|---|
| Binary Field "Shorty" ID | $newsItem.shorty | decd7a9812 |
| Binary Field "Shorty" URL | $newsItem.shortyUrl or $newsItem.image.shortyUrl | /dA/decd7a9812/zombies.jpg Note: When using the property without the name of the field (e.g., without .image), the shorty URL for the first Binary field on the Content Type is always returned. |
| Binary Field "Shorty" URL using inode (instead of identifier) | $newsItem.shortyUrlInode or $newsItem.image.shortyUrlInode | /dA/91ec275d49/zombies.jpg Note: Always returns the shorty URL for the first Binary field on the Content Type. |
| Binary Field image with Resize | $newsItem.image.shortyUrl/200w | /dA/decd7a9812/image/zombies.jpg/200w |
BINARY RESIZE: /contentAsset/image/$newsItem.identifier/image/filter/Resize/resize_w/500
RAW BINARY IMAGE EXPORTER: $newsItem.image
BINARY IMAGE RAW URI: $newsItem.image.rawUri
BINARY IMAGE RESIZE URI WITH PARAMETERS:: $newsItem.image.getResizeUri(100, 100)
BINARY IMAGE RESIZE URI WITHOUT PARAMETERS: $newsItem.image.resizeUri
BINARY IMAGE THUMBNAIL URI WITH PARAMETERS: $newsItem.image.getThumbnailUri(100, 100,"255255255")
BINARY IMAGE THUMBNAIL URI WITHOUT PARAMETERS: $newsItem.image.thumbnailUri
*For more information, see the documentation on Binary and Image field Resizing and Processing.
In the following examples, the variable name of the Image field in the Content Type is "screenshot".
IMAGE FIELD SHORTY ID: $newsItem.screenshot.shorty (Image field name = "screenshot")
IMAGE FIELD SHORTY URL: $newsItem.screenshot.shortyUrl
RESIZE IMAGE FIELD WITH SHORTY URL: $newsItem.screenshot.shortyUrl/200w
RAW IMAGE FIELD EXPORTER: /dA/$newsItem.screenshot.map.identifier/fileAsset
RESIZE IMAGE FIELD NO SHORTY URL: /contentAsset/image/$newsItem.screenshot.map.identifier/fileAsset/filter/Resize/resize_w/500
*For more information, see the documentation on Binary and Image field Resizing and Processing.