Developers

image

Generates HTML IMG tag for given image path or object (e.g. Asset, Image). Site root prefix will be added automatically. Additional attributes may be supplied. 
{% image 'images/image_path.png' %}
#=> <img src="//site_root/images/image_path.png" />

{% image object %}
#=> <img src="//site_root/photos/photo_path.jpg" srcset="..." sizes="..." />
If an image tag with the srcset, sizes and src variables in the data attributes is needed, use an image_data tag instead.

Available attributes:

  • alt: the alt-tag for the image. If it doesn't exist, the default alt tag is taken from the name of the file
  • title: the title for the image.
  • height: the height of the image
  • width: the width of the image
  • class: the "class" attribute for the image tag
  • loading: to add lazy-loading ("lazy", "eager" etc.). Defaults to nil
  • style: the "style" attribute of the image tag
  • data-* or data_*: data attributes
  • sizes: user-defined sizes attribute
  • srcset: user-defined srcset attribute (either as a string or an array)
  • with_srcset: true or false, defaults to true. If the user uses an object for generating the image tag and doesn't want the srcset to be automatically generated, this can be given a value of false.
  • target_width: user-defined target width for an image (e.g. if the image doesn't need to be wider than a certain value)
{% image 'image_path.png' alt="Image" class="my-class" data-style="beautiful" %}
#=> <img src="/site_root/image_path.png" alt="Image" class="my-class" data-style="beautiful" />