Skip to main content

HTML Filters

asset_url​

Creates an asset url under assets_base_url.

Input​

  {{ 'images/large/' | asset_url }}

Output​

  '/assets/themes/example_theme/images/large/'

stylesheet_url​

Generates url for given stylesheet.

Input​

  {{ 'application.css' | stylesheet_url }}

Output​

  '/assets/themes/1/stylesheets/application.css'

stylesheet_tag​

Generates a stylesheet tag for given stylesheet url.

Input​

  {{ 'application.css' | stylesheet_url | stylesheet_tag }}

Output​

  <link href='/assets/themes/1/stylesheets/application.css' rel='stylesheet' type='text/css'  media='all'>

You can override the media attribute by passing it as a parameter.

Input​

  {{ 'print.css' | stylesheet_url | stylesheet_tag: 'print' }}

Output​

  <link href='/assets/themes/1/stylesheets/print.css' rel='stylesheet' type='text/css'  media='print'>

javascript_url​

Generates url for given script.

Input​

  {{ 'application.js' | javascript_url }}

Output​

  '/assets/themes/1/javascripts/application.js'

script_tag​

Generates a script tag for given script url.

Input​

  {{ 'application.js' | javascript_url | script_tag }}

Output​

  <script src='/assets/themes/1/javascripts/application.js' type='text/javascript'></script>

You can pass async or defer as a parameter to add that attribute.

Input​

  {{ 'application.js' | javascript_url | script_tag: 'defer' }}

Output​

  <script src='/assets/themes/1/javascripts/application.js' type='text/javascript' defer></script>

image_url​

Generates image url for given image.

Input​

  {{ 'rental.jpg' | image_url }}

Output​

  '/assets/themes/1/images/rental.jpg'

img_tag​

Generates an image tag for given image url.

Input​

  {{ 'rental.jpg' | image_url | img_tag: 'Rental photo' }}

Output​

  <img src='/assets/themes/1/images/rental.jpg' alt='Rental photo'>

encoded_mail_to​

Generates an obfuscated mailto link using JavaScript.

Input​

  {{ 'hello@example.com' | encoded_mail_to: 'Contact us' }}

Output​

  <script type='text/javascript'>/* obfuscated mailto link */</script>