img_tag

Owned by Harmen Fuite (Unlicensed)
Last updated: May 04, 2020
1 min read

Returns an HTML image tag. You can pass a string or a series of key:value arguments to set HTML attributes.

Input:

{{ "path-to-image.jpg" | img_tag }} {{ "path-to-image.jpg" | img_tag: class: "image-class", alt: "image-alt" }}

Output:

<img src="path-to-image.jpg"> <img src="path-to-image.jpg" class="image-class" alt="image-alt">

If the image is set by a media field, it is possible to enable inline cropping on the image. This way the user can match the image’s size to it’s neighbours for example.

Inline cropping

Enable inline cropping by adding the inline_crop_for argument. The value of the argument must be the attachment object you get by calling the media field’s name on the content object. E.g. calling post.featured_image returns an attachment object. (Read more on attachments).

Input:

{{ "path-to-image.jpg" | img_tag: inline_crop_for: post.featured_image }}

The returned html is just the image, but the the user will now be able to enter into cropping mode from the object’s edit screen. Make sure to use the attachment’s cropping values in the img_url filter, otherwise the user will not be able to see the result of his crop.