Displaying Content with Binary & Image Fields - Documentation topics on: displaying content with binary & image fields,displaying thumbnail images,display resized images,velocity,.

Displaying Content with Binary & Image Fields

dotCMS provides two types of images on a content type: binary or image.

Helper Properties and Methods

When accessing a binary field, you may access several helper properties and methods to easily get URLs to differnt versions of the image, including the image thumbnail, raw and resize exporters.

PropertyDescription
rawUri
getResizeUri(w, h)The full URI to the binary image resized to the specified width (w) and height (h).
resizeUriThe URI of the image with the resize parameters (e.g. /filter/Resize) added to the end (but without the width and height filters specified).
Please see below for an example.
getThumbnailUri(w, h, ?????)The URI to a thumbnail version of the image of the specified width (w) and height (h), and ????.
thumbnailUriThe URI to a thumbnail version of the image ????

Example

The following code demonstrated how to display binary images and image fields while iterating in Velocity over the following content type:

File Asset Pathing with Shorty ID

Example set of a File Asset Map to a variable: #set($content = $dotcontent.find(“f29effee-9bab-44cb-8b19-399cbb4a08ed”))

  1. SHORTY ID: $content.shorty

    Ex. output: f29effee9b
  2. SHORTY URL: $content.shortyUrl

    Ex. output: /dA/f29effee9b/bm-logo.png
  3. FILE ASSET SHORTY URL: $content.fileAsset.shortyUrl

    Ex. output: /dA/f29effee9b/bm-logo.png
  4. FILE ASSET SHORTY URL BY INODE: $content.fileAsset.shortyUrlInode

    Ex. output: /dA/468bdf6d30/bm-logo.png

Pull of News Content with display of a Binary field named “image”

##Binary Field Properties, Resizing, Filtering

  1. NEWS ITEM FIRST BINARY FIELD SHORTY ID: $newsItem.shorty (Returns shorty id of FIRST binary field on the Content Type)

    Ex. output: decd7a9812
  2. NEWS ITEM FIRST BINARY FIELD URL SHORTY ID: $newsItem.shorty (Returns shorty URL of FIRST binary field on the Content Type)

    Ex. output: /dA/decd7a9812/zombies.jpg
  3. NEWS ITEM BINARY FIELD SHORTY ID: $newsItem.image.shorty (Binary Field Name = “image” in the following examples)

    Ex. output: decd7a9812
  4. BINARY FIELD SHORTY URL: $newsItem.image.shortyUrl

    Ex. output: /dA/decd7a9812/image/zombies.jpg
  5. BINARY FIELD SHORTY URL BY INODE: $newsItem.image.shortyUrlInode

    Ex. output: /dA/91ec275d49/image/zombies.jpg
  6. BINARY FIELD RESIZE: $newsItem.image.shortyUrl/200w

    Ex. output: /dA/decd7a9812/image/zombies.jpg/200w

##Binary Field Properties, Resizing, Filtering (No Shorty ID)

  1. BINARY RESIZE: /contentAsset/image/$newsItem.identifier/image/filter/Resize/resize_w/500

    Ex. output: /contentAsset/image/decd7a98-12fa-4464-a893-5531f518f310/image/filter/Resize/resize_w/500
  2. RAW BINARY IMAGE EXPORTER: $newsItem.image

    Ex. output: com.dotmarketing.viewtools.content.BinaryMap@68c7c174[name=zombies.jpg,size=244 KB,rawUri=/contentAsset/raw-data/decd7a98-12fa-4464-a893-5531f518f310/image,resizeUri=/contentAsset/image/decd7a98-12fa-4464-a893-5531f518f310/image/filter/Resize,thumbnailUri=/contentAsset/image/decd7a98-12fa-4464-a893-5531f518f310/image/filter/Thumbnail,file=/Users/deangonzalez/singledotcms/tomcat8/webapps/ROOT/assets/9/1/91ec275d-49a1-440a-85c9-40aaff283786/image/zombies.jpg]
  3. BINARY IMAGE RAW URI: $newsItem.image.rawUri

    Ex. output: /contentAsset/raw-data/decd7a98-12fa-4464-a893-5531f518f310/image
  4. BINARY IMAGE RESIZE URI WITH PARAMETERS:: $newsItem.image.getResizeUri(100, 100)

    Ex. output: /contentAsset/image/decd7a98-12fa-4464-a893-5531f518f310/image/filter/Resize/resize_w/100/resize_h/100
  5. BINARY IMAGE RESIZE URI WITHOUT PARAMETERS: $newsItem.image.resizeUri

    Ex. output: /contentAsset/image/decd7a98-12fa-4464-a893-5531f518f310/image/filter/Resize
  6. BINARY IMAGE THUMBNAIL URI WITH PARAMETERS: $newsItem.image.getThumbnailUri(100, 100,"255255255")

    Ex. output: /contentAsset/image/decd7a98-12fa-4464-a893-5531f518f310/image/filter/Thumbnail/thumbnail_w/100/thumbnail_h/100/thumbnail_bg/255255255
  7. BINARY IMAGE THUMBNAIL URI WITHOUT PARAMETERS: $newsItem.image.thumbnailUri

    Ex. output: /contentAsset/image/decd7a98-12fa-4464-a893-5531f518f310/image/filter/Thumbnail

    *For more information, see the documentation on Binary and Image field Resizing and Processing.

Pull of News Content with Display of an Image field named “screenshot”

  1. IMAGE FIELD SHORTY ID: $newsItem.screenshot.shorty (Image field name = “screenshot”)

    Ex. output: a27c14b8a0
  2. IMAGE FIELD SHORTY URL: $newsItem.screenshot.shortyUrl

    Ex. output: /dA/a27c14b8a0/Rogue.jpg
  3. RESIZE IMAGE FIELD WITH SHORTY URL: $newsItem.screenshot.shortyUrl/200w

    Ex. output: /dA/a27c14b8a0/Rogue.jpg/200w
  4. RAW IMAGE FIELD EXPORTER: /contentAsset/image/$newsItem.screenshot.map.identifier/fileAsset

    Ex. output: /contentAsset/image/a27c14b8-a09a-4d3a-844a-2baee22fa14e/fileAsset
  5. RESIZE IMAGE FIELD NO SHORTY URL: /contentAsset/image/$newsItem.screenshot.map.identifier/fileAsset/filter/Resize/resize_w/500

    Ex. output: /contentAsset/image/a27c14b8-a09a-4d3a-844a-2baee22fa14e/fileAsset/filter/Resize/resize_w/500

    *For more information, see the documentation on Binary and Image field Resizing and Processing.