Liquid templating filters

Date filter

date

Formats a date string using specified formats

Date filter reference

Example

Input

{{ '2024-09-05T13:59:07Z' | date:'%F' }}

Output

2024-09-05

Date filter specifiers

Various ISO 8601 formats

HTML-tag and URL filters

img_url

Example, Liquid for the src attribute in an img-tag

Input

{{ article | img_url:0,50 }}

Output

/media/article/17f95478-638c-8c2f-b2eb-501ae41bd00b/Cradle-CMS-code-editor_0_50.png

product_img_url

Example product image

Input

{{ products[0] | product_img_url | img_tag:'alt-title'  }}

Output

<img src="https://cradlecms.com/media/product/17669fb0-983f-4ada-bc29-f9d80ff3e8c3/cradle-cms-productimage.webp" alt="alt-title" />

asset_img_url

Example asset image

Input

{{ settings.featureSectionImage | asset_img_url:0,50 }}

Output

/assets/docker-logo-blue_0_50.png

link_tag

Outputs <a href="url"...></a> link tag

Example

Input

{{ vendors[0] | url | link_tag:vendors[0].name }}

Output

<a href="/https:/cradlecms.com"  >Cradle</a>

script_tag

Outputs <script type="text/javascript" ...></script> tag for a link.

Example, filename and asset_url filter

Input

{{ 'myscript.js' | asset_url | script_tag }}

Output

<script type="application/javascript" src="https://cradlecms.com/assets/myscript.js" ></script>

Example, filename with path

Input

{{ '/assets/myscript.js' | script_tag }}

Output

<script type="application/javascript" src="/assets/myscript.js" ></script>

Example, full url

Input

{{ 'https://cradlecms.com/assets/myscript.js' | script_tag }}

Output

<script type="application/javascript" src="https://cradlecms.com/assets/myscript.js" ></script>

stylesheet_tag

Outputs <link rel="stylesheet" ...> tag

Example, filename and asset_url filter

Input

{{ 'mystyle.css' | asset_url | script_tag }}

Output

<script type="application/javascript" src="https://cradlecms.com/assets/mystyle.css" ></script>

Example, filename with path

Input

{{ '/assets/mystyle.css' | script_tag }}

Output

<script type="application/javascript" src="/assets/mystyle.css" ></script>

Example, full URL

Input

{{ 'https://cradlecms.com/assets/mystyle.css' | script_tag }}

Output

<script type="application/javascript" src="https://cradlecms.com/assets/mystyle.css" ></script>

url

Prints the URL path for an object

Example

Input

{{ article | url }}

Output

/blogs/docs/article/template-filters

Special filters

def

Returns a default value if the left side is undefined

Example

Input

{{ something_undefined | def:"The variable was not defined" }}

Output

The variable was not defined

related

Returns related collections, products, pages or articles having shared properties 'tag','vendor','collection','type' when in the object context.

Example

Input

{% assign relatedArticles = article | related:'tag' %}
    {% for article in relatedArticles limit:5 %}
{{ article.meta.h1 }}
{% endfor %}

Output

Paypal payment integration
Checkout
Shop settings
Products
Configuration overview

Liquid snippet for related products

{% assign relatedProducts = product | related %}
{% for product in relatedProducts limit:5 %}
    {% include 'productCard' %}
{% endfor %}

render

Serverside renders the content. Normally the content of a page, page.html, is not rendered but addning the filter will render the content and liquid can be used in the page editor.

Example

Input

{{ 'article.html' | render }}

Output

Liquid tags will be replaced within the content.

url_encode

Url encodes a string

Example

Input

{% '100% of all ÅÄÖ' | url_encode %}}

Output

100%25+of+all+%C3%85%C3%84%C3%96

Math filters

ceil

Rounds number up to closest integer

Example

Input

{{ 4.6 | ceil }}

Output

5

divided_by

Integer division (in which the fractional part, the remainder, is discarded)

Example

Input

{{ 7 | divided_by:3 }}

Output

2

floor

Rounds number down to closest integer

Example

Input

{{ 4.6 | floor }}

Output

4

minus

Subtraction by an integer

Example

Input

{{ 3 | minus:1 }}

Output

2

Example with decimals

Input

{{ 3.6 | minus:1.4 }}

Output

2.2

modulo

Returns the remainder after division

Example

Input

{{ 7 | modulo:4 }}

Output

3

Example

Input

{{ 37 | modulo:5 }}

Output

2

plus

Addition of integers

Example

Input

{{ '1' | plus:'2'  }}

Output

3

Example with decimals

Input

{{ '13.5' | plus:'2.9'  }}

Output

16.4

Example with variables

Addition of subtotal and the tax in a checkout form

{% assign x = form.subTotal %}
{% assign y = form.totalVAT %}
{% assign totalProducts = x | plus:y %}

round

Rounds input to the number of decimals

Example

Input

{{ 3.141562 | round: 2 }}

Output

3.14

times

Multiplication by integer

Example

Input

{{ 2 | times:3 }}

Output

6

Example, with decimals

Input

{{ 2.5 | times:3.7 }}

Output

9.25

String and Array filters

append

Appends a string

Example

Input

{{ 'test' | append:'-' | append:'me' }}

Output

test-me

capitalize

Capitalizes the first word

Example

Input

{{ 'hello world' | capitalize }}

Output

Hello world

downcase

Converts input to lowercase

Example

Input

{{ "WasCamelCased" | downcase }}

Output

wascamelcased

escape

Escapes special characters like < to become <. It escapes only five such characters: <, >, &, ' and .

Example

Input

{{ "Click > Here & There" | escape }}

Output

Note that the browser will not show the HTML Character Entity codes

Click > Here & There

first

Returns the first element of an array

Example

We first create an array named fish from a string.

Input

{% assign fish = "Cod,Mackerel,Trout,Salmon" | split: "," %}
{{ fish | first }}

Output

Cod

last

Returns the last element of an array

Example

Input

{{ fish | last }}

Output

Salmon

handleize

Transforms string to a handle format

Example

Input

{{ 'jeans collection' | handleize }}

Output

jeans-collection

insert

insert replaces "%s %1..%n" in source with matching str[arg-n]

Example

Input

{{'insert %s here' | insert:'something'}}

Output

"insert something here"

Example

Input

{{'hello %1%2' | insert:'world','!'}}

Output

"hello world!"

join

Joins elements of array with a separator

Example

Input

[
  "Cod",
  "Mackerel",
  "Trout",
  "Salmon"
]

{{ fish | join:', ' }}

Output

Cod, Mackerel, Trout, Salmon

strip

Strips whitespace from both sides of a string

Example

Input

{{ " hello " | strip }}

Output

"hello"

lstrip

Strips whitespace from the left side of a string

Example

Input

{{ " hello " | lstrip }}

Output

"hello "

rstrip

Strips whitespace from the right side of a string

Example

Input

{{ " hello " | rstrip }}

Output

" hello"

map

Select/map a given property from an associative array (hash)

Example

Input

{{ blogs | map:'title' | join:', ' }}

Output

Videos, Feature, Roadmap, FAQ, Features, Guides, Tech questions, Docs, Change log, eCommerce guides

newline_to_br

Example

Input

{{ "I have a multiline string!\nThat I want to output in html\n" | newline_to_br }}

Output

I have a multiline string!
That I want to output in html

pluralize

Returns the second word if the input is not 1

Example

Input

{{ 2 | pluralize: 'car', 'cars' }}

Output

cars

prepend

Prepend a string

Example

Input

{{ 'world' | prepend:'hello ' }}

Output

hello world

remove_first

Remove the first occurrence

Example

Input

{{ 'Clean tetest!' | remove_first:'te'  }}

Output

Clean test!

remove

Remove each occurrence

Example

Input

{{ 'foobarfoo' | remove:'foo' }}

Output

bar

replace_first

Replaces the first occurrence

Example

Input

{{ 'barbar' | replace_first:'bar','foo' }}

Output

foobar

replace

Example

Input

{{ 'foofoo' | replace:'foo','bar' }}

Output

barbar

reverse

Reverses an array

Example

Input

{% assign abc = "a,b,c" | split: "," %}
{{ abc | reverse }}

Output

cba

size

Returns the length of an array or string

Example, string

Input

{{ "what is the size of this" | size }}

Output

24

It is also possible to check for the size in an if statement

{% if article.excerpt.size > 0 %}
    {{ article.excerpt | strip_html }}
{% endif %}

slice

Slice an array or string using an offset and a length

Example

Input

{{ "hello world" | slice: 1, 3 }}

Output

ell

sort

Sorts array elements in alphabetical order

Example

Input

{% assign fruit = "Banana,Date,Ananas,Citrus" | split: "," %}
{{ fruit | sort | join:', ' }}

Output

Ananas, Banana, Citrus, Date

split

Returns an array by spliting a string on a matching separator

Example

Input

{% let a = "a,b,c,d" | split:"," %}

Output

[
  "a",
  "b",
  "c",
  "d"
]

strip_html

Strip HTML from string

Example

Input

{{ "Testing" | strip_html }}

Output

Testing

strip_newlines

Strips all newlines \n from strings

Example

Input

{{ "Lorem\n ipsum\n dolor\n sit\n amet" | strip_newlines }}

Output

Lorem ipsum dolor sit amet

truncate

Truncates a string to number of characters with optional ellipsis parameter. Note that the ellipsis characters are counted into the amount or characters.

Example, truncates to 16 characters in total with ... in the end.

Input

{{ 'this is to long for me' | truncate: 16,'...' }}

Output

this is to lo...

Example, truncates to 4 characters ending with !.

Input

{{ '1234567890' | truncate: 4,'!' }}

Output

123!

Example, with empty ellipsis

Input

{{ '1234567890' | truncate: 4,'' }}

Output

1234

truncatewords

Truncates a string to number of words with optional ellipsis parameter

<string> | truncatewords:<int number> [, <string ellipsis, default '...'> ]

Example, one word and default ellipsis

Input

{{ 'hello world' | truncatewords:1 }}

Output

hello...

Example, four words and empty ellipsis

Input

{{ 'Lorem ipsum dolor sit amet.' | truncatewords:4, '' }}

Output

Lorem ipsum dolor sit

uniq

Removes duplicates from an array, optionally using a property parameter, like price, to test with, uniq:'price'

Example

Input

{% let duplicates = "a,a,b,b,e,e,e,c,d" | split:"," %}
{{ duplicates | uniq }}

Output

a,b,e,c,d

upcase

Converts string or array input to uppercase

Example

Input

{{ 'WasCamelCased' | upcase }}

Output

WASCAMELCASED

Example

Input

{% assign fruit = "Banana,Date,Ananas,Citrus" | split: "," %}
{{ fruit | upcase }}

Output

[BANANA DATE ANANAS CITRUS]