Img

Img

{% img %}

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

Examples

Img shortcut

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

Img shortcut advanced

Copy
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" />

Img shortcut with attributes

Copy
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" />

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

Image_url

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