Img

Img

{% img %}

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

{% img image attributes %}

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

attributes

preset
 
Zero or more image presets; may repeat or include space-separated list
link
 
If string, wraps image with anchor to that URL. If true and image has a URL (page), wraps to the image URL
class
 
Class attribute for the img tag. If included multiple times all of the classes will be included, separated by spaces
link_class
 
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
 
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
 
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

Related

{% gallery %}

{% articles %}

Examples

Img shortcut

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

Img shortcut advanced

Copy
Template: {% 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" />

Img shortcut with attributes

Copy
Template: {% 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" />

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: <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>

Image_url

Copy
Template: {% image_url output_to_template = entity.image %}
Output: "https://domain.com/path/to/img.jpg"