{% img %}

This tag is a shortcut for displaying an image saved in the CMS. It outputs the image as an img tag, optionally wrapped in a link.

Syntax

{% img
Image
 
Image must evaluate to a valid image on the site.
link:[true|false|"url"]
 
If link is set to true and there is a page for the selected image, the img tag will be surrounded by an anchor tag with a link to the image page. To link to a custom URL instead, use link:"custom/url".
link_class:"class_for_anchor_tag"
link_target:"_blank"
preset:"image presets separated by spaces"
attribute1:"add or edit an img attribute"
 
This tag will accept any number of parameters and evaluate them before including them as attributes of the image tag. This includes the alt, title, width, and height attributes but does NOT include the src attribute. You may also include reference variables, which will be dereferenced into their attribute names.
%}

Examples

Img shortcut

Copy
Template: {% img page.featured_image link:true %} Output: Image Alt Text

Img shortcut with attributes

Copy
Template: {% img "Img for Homepage" preset:"thumb250" title:"Back to Home Page" other:"some other attribute" %} Output: Image Alt Text

Img shortcut with custom link

Copy
Template: {% 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: Image Alt Text

Img shortcut advanced

Copy
Template: {% var property = 'data-attribute-x' %} {% img page.featured_image link:false &property:'xyz' %} Output: Image Alt Text

{{ image }}

{% image_url %}