Liquid templating filters

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 &lt;. 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

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"

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

Features, Guides, Tech questions, Roadmap, Docs, Videos, FAQ, Cange log

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

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

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

Example

Input

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

Output

this is to lo...

Example

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]

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

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

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

Format specifier Output Description
%Y%m%d 20071119 Calendar date (basic)
%F 2007-11-19 Calendar date (extended)
%Y-%m 2007-11 Calendar date, reduced accuracy, specific month
%Y 2007 Calendar date, reduced accuracy, specific year
%C 20 Calendar date, reduced accuracy, specific century
%Y%j 2007323 Ordinal date (basic)
%Y-%j 2007-323 Ordinal date (extended)
%GW%V%u 2007W471 Week date (basic)
%G-W%V-%u 2007-W47-1 Week date (extended)
%GW%V 2007W47 Week date, reduced accuracy, specific week (basic)
%G-W%V 2007-W47 Week date, reduced accuracy, specific week (extended)
%H%M%S 083748 Local time (basic)
%T 08:37:48 Local time (extended)
%H%M 0837 Local time, reduced accuracy, specific minute (basic)
%H:%M 08:37 Local time, reduced accuracy, specific minute (extended)
%H 08 Local time, reduced accuracy, specific hour
%H%M%S,%L 083748,000 Local time with decimal fraction, comma as decimal sign (basic)
%T,%L 08:37:48,000 Local time with decimal fraction, comma as decimal sign (extended)
%H%M%S.%L 083748.000 Local time with decimal fraction, full stop as decimal sign (basic)
%T.%L 08:37:48.000 Local time with decimal fraction, full stop as decimal sign (extended)
%H%M%S%z 083748-0600 Local time and the difference from UTC (basic)
%T%:z 08:37:48-06:00 Local time and the difference from UTC (extended)
%Y%m%dT%H%M%S%z 20071119T083748-0600 Date and time of day for calendar date (basic)
%FT%T%:z 2007-11-19T08:37:48-06:00 Date and time of day for calendar date (extended)
%Y%jT%H%M%S%z 2007323T083748-0600 Date and time of day for ordinal date (basic)
%Y-%jT%T%:z 2007-323T08:37:48-06:00 Date and time of day for ordinal date (extended)
%GW%V%uT%H%M%S%z 2007W471T083748-0600 Date and time of day for week date (basic)
%G-W%V-%uT%T%:z 2007-W47-1T08:37:48-06:00 Date and time of day for week date (extended)
%Y%m%dT%H%M 20071119T0837 Calendar date and local time (basic)
%FT%R 2007-11-19T08:37 Calendar date and local time (extended)
%Y%jT%H%MZ 2007323T0837Z Ordinal date and UTC of day (basic)
%Y-%jT%RZ 2007-323T08:37Z Ordinal date and UTC of day (extended)
%GW%V%uT%H%M%z 2007W471T0837-0600 Week date and local time and difference from UTC (basic)
%G-W%V-%uT%R%:z 2007-W47-1T08:37-06:00 Week date and local time and difference from UTC (extended)

html-tag and URL filters

img_tag

Example

Input

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

Output

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

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="/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="/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

Other 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 'tags','vendor','collection','type' when in the object context.

Example

Input

{% assign relatedArticles = article | related | key:'title' | limit:6 %}

Output

[]

url_encode

Url encodes a string

Example

Input

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

Output

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