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" />
Last updated on