Filtering liquid outputs

Summary

You can use filters to change the way outputs are displayed; for example:

Hello {{ contact.data.firstname }}, the current date is {{ account.datetime }}.

Might be outputted as:

Hello ben, the current date is 05/08/2015 07:30:31.

But it can be changed with filters as follows:

Hello {{ contact.data.firstname | capitalize }}, the current date is {{ account.datetime | date: "%a %B %Y" }}.

To show:

Hello Ben, the current date is 05 August 2015.

Note that the first element in the output (surrounded by {{}} brackets ) is always what gets outputted, and the other bits (separated by | pipes) are filters.

An output can have multiple filters.

For example:

{{ account.datetime | date: "%a %B %Y" | upcase }}

Will output the date in the format containing the day month and year, then uppercase all letters inside it:

05 AUGUST 2015

Text filters

camelcase

Converts a string to camelcase. For example:

{{ "Henry the tiger-cat" | camelcase }}

Outputs: HenryTheTigerCat

capitalize

Changes the first character of a string to be upper case and the rest to be lower case. For example:

{{ "the Quick broWN FOX" | capitalize }}

Outputs: The quick brown fox

downcase

Convert an input string to lowercase. For example:

{{ "the Quick broWN FOX" | downcase }}

Outputs: the quick brown fox

upcase

upcase - convert an input string to uppercase. For example:

{{ "the Quick broWN FOX" | upcase }}

Outputs: THE QUICK BROWN FOX

size

Size returns the size of an array or string. For example:

{{ "the Quick broWN FOX" | size }}

Outputs: 19

Note that you can also use ".size" for example:

{{ contact.data.firstname.size }}

Will return the length of the first name for a contact.

replace

Replaces each instance of a substring within a string. For example:

{{ "http://wombles.bingbingfrog.com/wombles" | replace: 'womble','badger' }}

Outputs: http://badgers.bingbingfrog.com/badgers

replace_first

Replaces the first instance of a substring within a string. For example:

{{ "http://wombles.bingbingfrog.com/wombles" | replace_first: 'womble','badger' }}

Outputs: http://badgers.bingbingfrog.com/wombles

remove

Removes each occurrence of a substring from within a string. For example:

{{ "http://wombles.bingbingfrog.com/wombles" | remove: 'womble' }}

Outputs: http://s.bingbingfrog.com/s

remove_first

Removes the first occurrence of a substring from within a string. For example:

{{ "http://wombles.bingbingfrog.com/wombles" | remove_first: 'womble' }}

Outputs: http://s.bingbingfrog.com/wombles

truncate

Truncates a string down to n characters. It also accepts a second parameter that will append to the string. If no parameter is given then the string will be appended with 3 dots. The appended string is included in the character count. For example:

{{ "If you go down in the woods today you're sure of a big surprise" | truncate: 20 }}

Outputs: If you go down in...

{{ "If you go down in the woods today you're sure of a big surprise" | truncate: 20,'…(read more)' }}
Outputs: If you g…(read more)
truncate words

Truncastes a string down to n words. It also accepts a second parameter that will append to the string. If no parameter is given then the string will be appended with 3 dots. For example:

{{ "If you go down in the woods today you're sure of a big surprise" | truncatewords: 5 }}

Outputs: If you go down in...

{{ "If you go down in the woods today you're sure of a big surprise" | truncatewords: 5,'…(read more)' }}

Outputs: If you go down in…(read more)

prepend

Prepends a string to the input. For example:

{{ "rabbits can see behind themselves but have got a blind spot right in front of their face" | prepend: "Did you know, " }}

Outputs: Did you know, rabbits can see behind themselves but have got a blind spot right in front of their face

append

Appends a string to the input. For example:

{{ "When I'm sad, I stop being sad and be awesome instead." | append: " True story." }}

Outputs: When I'm sad, I stop being sad and be awesome instead. True story.

slice

Takes a substring from an input starting after the nth character, where n is the first parameter. The length of the substring taken is the second parameter. For example:

{{ "With many cheerful facts about the square on the hypotenuse" | slice: 12,8 }}

Outputs: eerful f

{{ "With many cheerful facts about the square on the hypotenuse" | slice: -12,8 }}

Outputs: he hypot

split

Splits a string on a matching pattern. For example:

{{ "red and yellow and pink and green, orange and purple and blue" | split: "and" }}

Outputs: ["red "," yellow "," pink "," green, orange "," purple "," blue"]

Maths filters

minus

Subtracts from the input number. For example:

{{ 100 | minus: 2 }}
Outputs: 98
plus

Adds to the input number. For example:

{{ 100 | plus: 2 }}
Outputs: 102
times

Multiplies the input number. For example:

{{ 100 | times: 2 }}
Outputs: 200
divided_by

Divides the input. For example:

{{ 100 | divided_by: 2 }}

Outputs: 50

Note that if the input is an integer, so will the output be. For example:
{{ 100 | divided_by: 7 }}

Outputs: 14

round

Rounds the input to the nearest integer or specified number of decimals. For example:

{{ 101.99 | round: 1 }}

Outputs: 102.0

floor

Rounds the input down to the . For example:

{{ 101.99 | floor }}

Outputs: 101

modulo

Outputs the remainder when dividing by the given value. For example:

{{ 100 | modulo: 7 }}

Outputs: 2

money

Outputs the number as a currency string with the appropriate symbol and number of decimal places. For example:

{{ 100 |money: "GBP" }}

Outputs: £100.00

{{ 17.1 |money: "USD" }}

Outputs: $17.10

{{ 1000000 |money: "EUR" }}

Outputs: 1 000 000,00 €

Array filters

first

Gets the first element of the passed in array.

last

Gets the last element of the passed in array.

join

Join elements of the array with certain character between them. For example:

{{ "Conquest", "War", "Famine", "Death" | join: " and " }}

Outputs: Conquest and War and Famine and Death

sort

Sorts the elements of an array based on a given attribute of an element in the array. For example:

{% assign products = account.insight.Products | sort: 'price' %}
{% for product in products %}
{{ product.title }} {{ product.price }}<br/>
{% endfor %}

Outputs a list of products from the account.insight.Products collection starting with the cheapest and in ascending order of price.

size

Returns the size of an array (or string). For example:

{{ account.insight.Products | size }}

Will output an integer with the number of objects in the account Products collection.

{{ account.insight.Products.size }}

Will do the same thing.

Date filters

date

Formats the date in the specified format. For example:

{{ account.date | date: "%a, %b %d, %y" }}
Outputs: Wed, Aug 5, 2015
Note that only English date names are available. For the full list of date parameters available, see below.
add_days

Adds the specified number of days to the date. For example:

This voucher expires tomorrow, {{ account.date | add_days: 1 | date: "%b %d" }}
Outputs: This voucher expires tomorrow, Aug 6
(Where Aug 6 is tomorrow's date.)
Negative numbers can be used for subtracting days.
add_weeks

Adds the specified number of weeks to the date. Negative numbers can be used for subtracting weeks.

add_months

Adds the specified number of months to the date. Negative numbers can be used for subtracting months.

add_years

Adds the specified number of years to the date. Negative numbers can be used for subtracting years.

Date formatting

The following parameters can be used for formatting dates.

%a

Abbreviated weekday. For example:

{{ account.datetime | date: "%a" }}

Outputs: Wed

%A

Full weekday. For example:

{{ account.datetime | date: "%A" }}

Outputs: Wednesday

%b

Abbreviated month name. For example:

{{ account.datetime | date: "%b" }}

Outputs: Aug

%B

Full month name. For example:

{{ account.datetime | date: "%B" }}

Outputs: August

%c

Preferred local date and time representation. For example:

{{ account.datetime | date: "%c" }}

Outputs (depending on account locale): Wed Aug 05 11:37:59 2015
or: Wed 05 Aug 11:37:59 2015

KNOWN BUG: This currently outputs based on the preferred English (US) date format regardless of account locale.

%d

Day of the month, zero-padded. For example:

{{ account.datetime | date: "%d" }}

Outputs: 05

%-d

Day of the month, not zero-padded. For example:

{{ account.datetime | date: "%-d" }}

Outputs: 5

%D

Formats the date in dd/mm/yyyy format. For example:

{{ account.datetime | date: "%D" }}

Outputs: 31/08/2015

%e

The blank padded day of the month. For example:

{{ account.datetime | date: "%e" }}

Outputs: ' 5'

KNOWN BUG: This does not chain well with the add_days filter.

%F

Returns the date component of the input in ISO 8601 format (yyyy-mm--dd). For example:

{{ account.datetime | date: "%F" }}

Outputs: 2015-08-05

%H

Hour of the day, 24-hour clock (00-23). For example:

{{ account.datetime | date: "%H" }}

Outputs: 15

%I

Hour of the date, 12-hour clock (1-12). For example:

{{ account.datetime | date: "%I" }}

Outputs: 3

%j

Day of the year. For example:

{{ account.datetime | date: "%j" }}

Outputs: 217

%k

Hour of the day, 24-hour clock (1-24). For example:

{{ account.datetime | date: "%k" }}

Outputs: 15

%m

Month of the year (01-12). For example:

{{ account.datetime | date: "%m" }}

Outputs: 08

%M

Minute of the hour (00-59). For example:

{{ account.datetime | date: "%M" }}

Outputs: 37

%p

The meridian indicator (AM/PM). For example:

{{ account.datetime | date: "%p" }}

Outputs: PM

%r

12-hour time (in %I:%M::S %p format). For example:

{{ account.datetime | date: "%r" }}

Outputs: 07:37:00 PM

%R

24-hour time (in %H:%M:%S format). For example:

{{ account.datetime | date: "%R" }}

Outputs: 19:37:00

%U

The number of the week in the current year, starting with the first Sunday as the first day of the week. For example:

{{ account.datetime | date: "%U" }}

Outputs: 32

%W

The number of the week in the current year, starting with the first Monday as the first day of the week. For example:

{{ account.datetime | date: "%a" }}

Outputs: 32

%w

The day of the week (0-6) with Sunday being 0. For example:

{{ account.datetime | date: "%a" }}

Outputs: 3

%x

Preferred local date representation. For example:

{{ account.datetime | date: "%x" }}

Outputs (depending on account locale): 30/07/2015
or: 07/30/2015

KNOWN BUG: This currently outputs based on the preferred English (UK) date format regardless of account locale

%X

Preferred local time representation. For example:

{{ account.datetime | date: "%X" }}

Outputs (depending on account locale): 15:37:32
or: 03:37:32 PM

KNOWN BUG: This currently outputs based on the preferred English (UK) date format regardless of account locale

%y

Year without the century (00-99). For example:

{{ account.datetime | date: "%y" }}

Outputs: 15

%Y

Year with the century. For example:

{{ account.datetime | date: "%Y" }}

Outputs: 2015

%z

Timezone offset from UTC. For example:

{{ account.datetime | date: "%z" }}

Outputs: +0100

KNOWN BUG: This currently does not work

%:z

Timezone offset from UTC with a colon. For example:

{{ account.datetime | date: "%:z" }}

Outputs: +01:00

KNOWN BUG: This currently does not work

%Z

Timezone abbreviated name. For example:

{{ account.datetime | date: "%Z" }}

Outputs: BST

KNOWN BUG: This currently outputs the timezone offset with a colon.

Have more questions? Submit a request

Comments

Powered by Zendesk