{% 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

Syntax: {% img Image [link:true|false|"url"] [link_class:"class_for_anchor_tag"] [link_target:"_blank"] [preset:"image presets separated by spaces"] [attribute1:"add or edit an img attribute"] [attribute2:"etc..."] ... %}

Image must evaluate to a valid image on the site.

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".

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

Template: {% img page.featured_image link:true %}
Output: <a href="http://www.domain.com/path/to/image/page"><img src="http://www.domain.com/path/to/img.jpg" alt="Image Alt Text" title="Image Title" width="Image Width" height="Image Height" /></a>
Template: {% img "Img for Homepage" preset:"thumb250" title:"Back to Home Page" other:"some other attribute" %}
Output: <img src="http://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" />
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="http://www.domain.com/path/to/custom/destination" class="external_link" target="_blank"><img src="http://www.domain.com/path/to/altered/img.jpg" alt="Image Alt Text" title="Open In New Tab" width="Image Width" height="Image Height" /></a>
Template: {% var property = 'data-attribute-x' %}
{% img page.featured_image link:false &property:'xyz' %}
Output: <img src="http://www.domain.com/path/to/img.jpg" alt="Image Alt Text" title="Image Title" width="Image Width" height="Image Height" data-attribute-x="xyz" />

Developer Overview

Liquid Markup