Img tag

From Shopify Wiki

img_tag(url, alt="")

This filter creates an image tag, using the url parameter as image source (<img src="...>) and an optional second parameter as alt description of the image.

Example usage:

{{ 'smirking_gnome.gif' | asset_url | img_tag }}

This would render the image 'smirking_gnome.gif' from your asset folder.

In this case it could be something like:"<img src="/files/shops/32055/assets/smirking_gnome.gif" />"

To give the image a alt attribute, it has to look like this:

{{ 'smirking_gnome.gif' | asset_url | img_tag: 'Smirking Gnome' }}

This assigns the "alt" attribute to the img tag. This allows users who might have images turned off in their browsers or browsers using screen readers for accessibility reasons to be able to "see" the image attribute.

In this case the filter output would be: "<img src="/files/shops/32055/assets/shop.css" alt="Smirking Gnome" />"

Of course, it's possible to plug in variables in your Liquid output tag, instead of using string literals.

Example:

{% assign file_name = 'smirking_gnome.gif' %}
{{ file_name | asset_url | img_tag: 'Smirking Gnome' }}

Using variables might be useful if you follow a convention in naming some image files in your Assets folder:

{% capture file_name %}{{ collection.handle }}.jpg{% endcapture %}
{% capture alt_attr %}{{ collection.title | escape }}{% endcapture %}
{{ file_name | asset_url | img_tag: alt_attr }}

To make the above code more succinct, use the append filter:

{% capture alt_attr %}{{ collection.title | escape }}{% endcapture %}
{{ collection.handle | append: '.jpg' | asset_url | img_tag: alt_attr }}