Skip to documentation content

Image

On this page

    The image object and its properties for image fields.

    {{ image }}

    Properties
    Name Type Description
    object_type string Will always be image
    is_valid boolean True if this references a published image
    guid string The unique identifier for this image
    value string Contains the same value as guid
    name {{ text }} The name of the image
    title {{ text }} The title of the image
    linked_title string A link to the image if it has a URL, or the escaped title if not
    alt {{ text }} Alternative text for accessibility and when the image cannot be displayed
    path string Full url of the uploaded image in the CDN
    height integer Pixel height of the image
    width integer Pixel width of the image
    filesize integer The image size in bytes
    attribution {{ textarea }} Attribution or credit text for the asset (e.g., photographer, source). The specific format of the attribution text is at the discretion of the editor
    tags {{ tags }} The list of tags associated with this image
    authors {{ authors }} The list of authors associated with this image
    has_url boolean True if the image has a URL
    include_in_search boolean Whether or not this image should be returned in on-site search results
    domain_name {{ text }} The domain name used by the URL for this image
    url {{ text }} The portion of the URL for this image following the domain name
    full_url string The full URL for this image including the scheme, domain name, and path
    visited boolean Whether or not the user has visited this URL previously in their current session. Note that this will always be false if the user has not allowed session permission (see the Permissions and Personalization documentation). Using this property prevents the page from being fast-cached
    template_guid string The unique identifier for the template that would be used to respond to this URL
    template {{ template }} The template that would be used to respond to this URL
    canonical_url {{ url }} The canonical URL if this is not the original source of content for this URL
    browser_title {{ text }} The browser title to use for this URL
    meta_description {{ textarea }} The meta description for this URL
    meta_robots {{ text }} The meta robots for this URL
    keywords {{ textarea }} The SEO keywords for this URL
    search_entity_guid string The unique identifier for the entity that search results should be directed to (if this image does not have a URL)
    search_entity {{ entity }} The entity that search results should be directed to (if this image does not have a URL)
    folder_guid string The unique identifier for the folder that contains this image.
    folder {{ folder }} The folder that contains this image.
    field_id string The identifier for this field
    label string The label for this field
    output string The default output that the image produces when output directly to the template. The default output may change at any time. Template developers should avoid using this and should handle the output of images themselves
    data {{ data }} Object containing the custom fields on this image
    * string Specific custom fields may be accessed using {{ entity.fieldid }} or {{image['field-id']}}
    Example Output an img element (and optional link) with the img shortcutUse the img shortcut to output an <img> element, optionally wrapped in a link, with presets and custom attributes.

    Basic: image with default link

    Liquid
    {%- img page.featured_image link:true -%}
    Output
    <a href="https://www.domain.com/path/to/image/page"><img src="https://www.domain.com/path/to/img.jpg" alt="Image Alt Text" title="Image Title" width="Image Width" height="Image Height" /></a>

    Outputs the image wrapped in a link to the image's default page.

    Image without link

    Liquid
    {%- img page.featured_image link:false -%}
    Output
    <img src="https://www.domain.com/path/to/img.jpg" alt="Image Alt Text" title="Image Title" width="Image Width" height="Image Height" />

    Outputs only the <img> element when link is false.

    With presets and custom attributes

    Liquid
    {%- img "Img for Homepage" preset:"thumb250" title:"Back to Home Page" other:"some other attribute" -%}
    Output
    <img src="https://www.domain.com/path/to/altered/img.jpg" alt="Image Alt Text" title="Back to Home Page" width="Image Width" height="Image Height" other="some other attribute" />

    Uses a preset to alter the image and sets title and other HTML attributes on the tag.

    With custom link URL and link attributes

    Liquid
    {%- img entity.link_img link:entity.link_destination.value link_class:"external_link" link_target="_blank" preset:"preview externallink" title:"Open In New Tab" -%}
    Output
    <a href="https://www.domain.com/path/to/custom/destination" class="external_link" target="_blank"><img src="https://www.domain.com/path/to/altered/img.jpg" alt="Image Alt Text" title="Open In New Tab" width="Image Width" height="Image Height" /></a>

    Uses a custom link URL and sets link class and target (e.g. for external links).

    Dynamic attribute name with reference variable

    Liquid
    {%- var property = 'data-attribute-x' -%}
{%- img page.featured_image link:false &property:'xyz' -%}
    Output
    <img src="https://www.domain.com/path/to/img.jpg" alt="Image Alt Text" title="Image Title" width="Image Width" height="Image Height" data-attribute-x="xyz" />

    Uses a reference variable (&property) to set an attribute whose name is determined at runtime.

    Example How to use the set_favicon method

    Set favicon from the name of an image

    Liquid
    {% set_favicon "favicon.ico" %}

    Sets the favicon to the image with the name "favicon.ico".

    Set favicon from image

    Liquid
    {%- image img = "favicon" -%}
{%- set_favicon img -%}

    Sets the favicon to the specified image object.

    Set favicon from URL string

    Liquid
    {% set_favicon "https://domain.com/path/to/image.ico" %}

    Sets the favicon to the specified URL.

    {{ images }}

    Contains multiple images.

    Properties
    Name Type Description
    object_type string Will always be images
    is_valid boolean True if this contains at least one published image
    output string The default output that the images will produce when it is output directly to the template - using the "output_in_list" property of each image in the items list
    prepended list List containing any prepended images.
    fetched list List containing all of the images that were fetched from the database (as opposed to prepended or appended).
    appended list List containing any appended images.
    appended_unique list List containing any appended images excluding any images that are in either the list of prepended or fetched images.
    items list List containing all of the combined images from the prepended, fetched, and appended lists. If unique is true, this list will not contain any duplicates. If max_size is set, this list will not contain more than the number of images specified.
    size integer The total number of images in the items list, including prepended, fetched, and appended lists, and respecting the unique and max_size properties.
    max_size integer If set, this is the maximum number of items that will be returned in the items list and the maximum number of items that will be included when this images object is enumerated as a list. When not set, this value will be 0.
    unique boolean When true, the items list will not contain any duplicates. Only the first instance of each image will be included.
    limit integer The maximum number of items that were allowed to be in the list of fetched images. May be 0 in some cases (such as when when there are no fetched images.
    start integer The 1-based index of the first item in the list of fetched images.
    page integer The 1-based index of the paginated results returned in the list of fetched images, which is calculated from the start and limit parameters. Useful for paginated results.
    total_count integer The 1-based index of the first item in the list of fetched images
    total_pages integer If any items were fetched from the database, total_pages will contain the number of paginated result pages in the database for the provided arguments. This may also be calculated using the total_count and limit properties.

    {% image %}

    {% image output_to_template? [[var, set, or assign]? variable]? output_to_template? = value %}
    Parameters
    output_to_template optionalflag
    If included the {% image %} will be output directly to the template.
    var, set, or assign optionalkeyword
    Optional. Specify either "var", "set" or "assign" to change which scope this {% image %} is stored on. "var" is the default behavior.
    variable_name optionalvariable
    Specify a variable name in order to save this image to a variable. If not specified, it will be output to the template instead.
    value requiredexpression
    Should evaluate to an object of type image, or the name or guid of one. May use liquid filters.

    Fetches a single {{ image }}.

    Example How to use the set_favicon method

    Set favicon from the name of an image

    Liquid
    {% set_favicon "favicon.ico" %}

    Sets the favicon to the image with the name "favicon.ico".

    Set favicon from image

    Liquid
    {%- image img = "favicon" -%}
{%- set_favicon img -%}

    Sets the favicon to the specified image object.

    Set favicon from URL string

    Liquid
    {% set_favicon "https://domain.com/path/to/image.ico" %}

    Sets the favicon to the specified URL.

    {% images %}

    {% images output_to_template? [[var, set, or assign]? variable]? output_to_template? = arguments %}
    Parameters
    output_to_template optionalflag
    If included the {% images %} will be output directly to the template.
    var, set, or assign optionalkeyword
    Optional. Specify either "var", "set" or "assign" to change which scope this {% images %} is stored on. "var" is the default behavior.
    variable optionalvariable
    arguments requiredcollection
    Key:value pairs. May use the variable arguments syntax.

    Options

    prepend optionallist
    May be a single image, a list of images, or the name or guid of one image, to be included at the beginning of the images list.
    append optionallist
    May be a single image, a list of images, or the name or guid of one image, to be included at the end of the images list.
    exclude optionallist
    May be a single image, a list of images, or the name or guid of one image that should NOT be included in the fetched results. Has no effect on prepended or appended images.
    exclude_prepended optionalboolean
    True to specifically exclude all prepended images from the fetched results. If "unique:true" is specified this is the default behavior, although you may also specify "exclude_prepended:false" to allow any prepended items to be fetched along with other results anyway.
    exclude_appended optionalboolean
    True to specifically exclude all appended images from the fetched results. This is false by default - even if "unique:true" is specified - so that results are returned in the proper order.
    unique optionalboolean
    True to remove duplicates from each of the resulting lists (prepended, fetched, appended, and items), although there may be duplicates between the prepended, fetched, and appended lists. The "items" list will include objects in the order in which they appear - with prepended items first, then fetched items, then appended items.
    max_size optionalinteger
    The maximum number of items to be included in the "items" list. If there are any prepended or appended items, this will automatically lower the "limit" to only fetch as many images as needed. Note that this may also impact both the "page" and "total_pages" values in the resulting images. In order to use pagination with a list loaded using "max_size" use "start" instead of "page" and "limit".
    filter optionalvalue
    Only include images that match the given string filter
    tag optionalvalue
    May include multiple tags. Only include images with one of the given tags
    author optionalvalue
    May include multiple authors. Only include images with one of the given authors
    folder optionalvalue
    May include multiple folders. Only include images with one of the given folders
    date_created_start optionalvalue
    Only include images with date_created greater than or equal to date_created_start. Remember that date_created will typically be the date that the image was first published.
    date_created_end optionalvalue
    Only include images with date_created less than or equal to date_created_end. Remember that date_created will typically be the date that the image was first published.
    has_url optionalboolean
    If true, only return images that have a URL. If false, only return images that do NOT have a URL.
    template optionalobject
    Only return images with one of these templates. May be a single template, a list of templates, or the name or guid of a template to filter the results by.
    include_in_search optionalboolean
    True or false to only return images whose include_in_search property matches the provided value.
    domain_name optionalobject
    Only return images from the given domain.
    start optionalinteger
    Set the 1-based index of the first image to fetch.
    page optionalinteger
    Used to automatically calculate the first image to fetch based on both the "limit" and the 1-based "page" value. Defaults to 1, but is ignored if "start" is set.
    limit optionalinteger
    The maximum number of images to fetch. Defaults to 10. Note that if "max_size" is defined, then "limit" may be automatically lowered even if specified separately.
    sort_by optionalstring
    Specify which property to sort the results by. Has no effect on prepended or appended images. By default, results will be sorted by relevance if there is a filter string and date_created desc (newest first) if not. Options include:
    • relevance: only applies when there is a filter string. When sorting by relevance sort_direction is ignored.
    • date_created: the date each image was first published. Unpublishing and republishing one resets date_created to the current date.
    • random: results will be returned in a random order, which prevents the page from being fast-cached. Setting cache_random:true overrides this behavior and allows the page to be fast-cached anyway.
    • name
    • title
    • url
    • browser_title
    sort_direction optionalstring
    asc or desc.
    cache_random optionalboolean
    True to allow the results to be cached when sort_by is "random".

    Fetches a list of {{ images }}.

    {% img %}

    Shortcut to output a <img> tag for an image, optionally wrapped in a link.

    {% img image attributes %}
    Parameters
    value requiredobject
    Image object, guid, or name
    attributes optionalcollection
    Key:value pairs. May use the variable arguments syntax. Additional options for the image URL, img tag, and anchor tag (if applicable)

    Options

    preset optionalvalue
    Zero or more image presets; may repeat or include space-separated list
    link optionalvalue
    If string, wraps image with anchor to that URL. If true and image has a URL (page), wraps to the image URL
    class optionalvalue
    Class attribute for the img tag. If included multiple times all of the classes will be included, separated by spaces
    link_class optionalvalue
    Class attribute for the wrapping anchor tag, if applicable. If included multiple times all of the classes will be included, separated by spaces
    link_attribute optionalvalue
    Additional attributes for the wrapping anchor tag, if applicable. Each attribute must be prefixed with "link_", may only be included once, and must have a value to be included in the anchor tag
    other optionalvalue
    Additional attributes for img tag. Each additional attribute may only be included once and must have a value to be included in the img tag
    Example Output an img element (and optional link) with the img shortcutUse the img shortcut to output an <img> element, optionally wrapped in a link, with presets and custom attributes.

    Basic: image with default link

    Liquid
    {%- img page.featured_image link:true -%}
    Output
    <a href="https://www.domain.com/path/to/image/page"><img src="https://www.domain.com/path/to/img.jpg" alt="Image Alt Text" title="Image Title" width="Image Width" height="Image Height" /></a>

    Outputs the image wrapped in a link to the image's default page.

    Image without link

    Liquid
    {%- img page.featured_image link:false -%}
    Output
    <img src="https://www.domain.com/path/to/img.jpg" alt="Image Alt Text" title="Image Title" width="Image Width" height="Image Height" />

    Outputs only the <img> element when link is false.

    With presets and custom attributes

    Liquid
    {%- img "Img for Homepage" preset:"thumb250" title:"Back to Home Page" other:"some other attribute" -%}
    Output
    <img src="https://www.domain.com/path/to/altered/img.jpg" alt="Image Alt Text" title="Back to Home Page" width="Image Width" height="Image Height" other="some other attribute" />

    Uses a preset to alter the image and sets title and other HTML attributes on the tag.

    With custom link URL and link attributes

    Liquid
    {%- img entity.link_img link:entity.link_destination.value link_class:"external_link" link_target="_blank" preset:"preview externallink" title:"Open In New Tab" -%}
    Output
    <a href="https://www.domain.com/path/to/custom/destination" class="external_link" target="_blank"><img src="https://www.domain.com/path/to/altered/img.jpg" alt="Image Alt Text" title="Open In New Tab" width="Image Width" height="Image Height" /></a>

    Uses a custom link URL and sets link class and target (e.g. for external links).

    Dynamic attribute name with reference variable

    Liquid
    {%- var property = 'data-attribute-x' -%}
{%- img page.featured_image link:false &property:'xyz' -%}
    Output
    <img src="https://www.domain.com/path/to/img.jpg" alt="Image Alt Text" title="Image Title" width="Image Width" height="Image Height" data-attribute-x="xyz" />

    Uses a reference variable (&property) to set an attribute whose name is determined at runtime.