HTML Filters

These filters help generate HTML elements such as images, scripts, and stylesheets in Liquid templates. They simplify the process of embedding assets and ensure correct HTML output. Use these filters to dynamically insert images, scripts, and stylesheets into your templates.

img_tag

Creates an img element.

Input

{{ 'my-image.png' | img_tag }}
{{ 'my-image.png' | img_tag: 'My Image', 'image-class' }}
{{ product.image | img_tag }}

Output

<img src="my-image.png" />
<img src="my-image.png" alt="My Image" className="image-class" />
<img src="https://product-image-url" />

script_tag

Creates a script tag.

Input

{{ '/asset/my-script.js' | script_tag }}

Output

<script src="/asset/my-script.js"></script>

stylesheet_tag

Creates a stylesheet tag, accepts media type as a first argument and media type as a second argument.

Input

{{ '/asset/stylesheet.css' | stylesheet_tag }}

Output

<link href="/asset/stylesheet.css" type="text/css" media="all" />