image Object

Image object for use within content template displays.

Attributes

Attribute Required Description
Base file attributes
title Yes string Title of file.
description No number Description of file.
url Yes string URL where original file is stored/downloadable.
extension Yes string Extension of file. For example, png.
url_slug Yes string File name minus extension.
content_type Yes string MIME type of file. For example, image/png.
file_size Yes number Size of file in bytes.
keywords No string List of keywords to describe file.
downloadable? Yes boolean Whether or not the content author specified to include a download link to this file.
published_at No date Timestamp of when file was first published.
created_at Yes date Timestamp of when file was created.
updated_at Yes date Timestamp of when file was last updated.
id Yes number ID of file.
image block-specific attributes
embeddable? Yes boolean Whether or not the content author specified to embed this image directly onto the page through an <img> tag.
width Yes number Width of image in pixels.
height Yes number Height of image in pixels.

Category

Block Objects

Description

The image block object defines the blueprint for content blocks based on the base image content template.

Within your content templates’ displays, you would reference the block’s var_name containing the image data. (It won’t necessarily be named image but rather what you defined in the content_templates.json file.)

Here is an example display template using an image content block with a var_name of photo: 

      {% comment %}
        Embed with <img> tag.
      {% endcomment %}
      {% if photo.embeddable? %}
        <div class="photo">
          <img
            src="{{ photo.url }}"
            width="{{ photo.width }}"
            height="{{ photo.height }}"
            alt="{{ photo.title }}"
          >
        </div>
      {% endif %}
      
      {% comment %}
        Link to download photo.
        Example output: "Download: Island Vacation (jpg)"
      {% endcomment %}
      {% if photo.downloadable? %}
        <p class="file-download">
          Download:
          <a href="{{ photo.url }}">
            {{ photo.title }} ({{ photo.extension }})
          </a>
        </p>
      {% endif %}

Example Output 

      <div class="photo">
        <img
          src="//cdn.liveeditorapp.com/000/001/846/original/island-vacation.jpg"
          width="800"
          height="600"
          alt="Island Vacation"
        >
      </div>
      
      <p class="file-download">
        Download:
        <a href="//cdn.liveeditorapp.com/000/001/846/original/island-vacation.jpg">
          Island Vacation (jpg)
        </a>
      </p>