3 c. Rain - filters [NB]

Rain filters modify the output of a variable or string. This article explains the syntax of Rain filter and included these topics:

NOTE: The Twig documentation also explains the Rain filter syntax.

Manipulation filters

t (translate)

The t filter can be used to translate text. This filter is needed for both custom translations and also for automatic platform translations.

{{ 'Popular products' | t }}

Output (on the Dutch version of the website):

Populaire producten

date

The date filter formats a date to a given format.

{{ post.published_at | date("m/d/Y") }}

json_encode

The json_encode filter returns the JSON representation of a string.

{{ data | json_encode }}

capitalize

The capitalize filter capitalizes a string. The first character will be uppercase, all others lowercase.

{{ 'my first car' | capitalize }}

Output:

My first car

upper

The upper filter converts a value to uppercase.

{{ 'welcome' | upper }}

Output:

WELCOME

lower

The lower filter converts a value to lowercase.

{{ 'WELCOME' | lower }}

Output:

welcome

reverse

The reverse filter reverses a sequence, a mapping, or a string.

{% for product in products | reverse %} ... {% endfor %}

{{ '1234' | reverse }}

Output:

4321

sort

The sort filter sorts an array.

{% for product in products | sort %} ... {% endfor %}

Output:

  • Tag A
  • Tag B
  • Tag C
  • Tag D
  • Tag E

chunk

Chunks an array into size large chunks. The last chunk may contain less than size elements.

{% for tags in shop.tags | chunk(5) %}<ul>{% for tag in tags %} <li>{{ tag.title }}</li>{% endfor %}</ul>{% endfor %}

Output:

  • Tag 1
  • Tag 2
  • Tag 3
  • Tag 4
  • Tag 5
  • Tag 6
  • Tag 7
  • Tag 8
  • Tag 9
  • Tag 10
  • Tag 11
  • Tag 12
  • Tag 13

parts

Slices an array into size parts. The last part may contain less elements than in the other parts.

{% for tags in shop.tags | parts(3) %}<ul>{% for tag in tags %} <li>{{ tag.title }}</li>{% endfor %}</ul>{% endfor %}

Output:

  • Tag 1
  • Tag 2
  • Tag 3
  • Tag 4
  • Tag 5
  • Tag 6
  • Tag 7
  • Tag 8
  • Tag 9
  • Tag 10
  • Tag 11
  • Tag 12
  • Tag 13

limit

The limit filter is used to limit the number of array results. For example, in an array of 5 tags, using this snippet:

{% for tag in tags | limit(3) %}{{ tag.title }}{% endfor %}

Output:

  • Tag 1
  • Tag 2
  • Tag 3

replace

The replace filter is used to modify strings

{% set fruit1 = 'apples' %}{{ "I like bananas and pineapples" | replace({'bananas': fruit1, 'pineapples': "oranges"}) }}

Output:

I like apples and oranges

HTML filters

raw

The raw filter marks the value as being “safe”, which means that in an environment with automatic escaping enabled this variable will not be escaped if raw is the last filter applied to it:

{% autoescape true %\}{{ var | raw }} {# var won't be escaped #} {% autoescape true %\}{{ var | raw }} {# var won't be escaped #} {% endautoescape %}

nl2br

The nl2br filter inserts HTML line breaks before all newlines in a string.

{{ "I like Rain.\nYou will like it too." | nl2br }}

Outputs:

I like Rain. You will like it too.

URL filters

url

The url filter transforms a relative URL into an absolute URL.

{{ product.url | url }}

Output:

http://www.your-domain.com/product.html

url_core

The url_core filter transforms a relative system URL into an absolute system URL.

{{ 'gui.js' | url_core }}

Output:

http://assets.webshopapp.com/core/gui.js

url_asset

The url_asset filter transforms a relative asset URL into an absolute asset URL.

{{ 'stylesheet.css' | url_asset }}

Output:

http://assets.webshopapp.com/your-shopdomain/stylesheet.css?1

url_image

The url_image filter transforms an image ID into an absolute image URL.

{{ product.image | url_image }}

image.jpeg

The url_image filter takes two optional arguments to adjust some settings.

The first argument: WIDTH x HEIGHT x RESIZE METHOD

There are 4 resize methods to create different image sizes.

RESIZE METHOD 1 (FILL): RESIZES AND CROPS THE IMAGE SO IT WILL FIT THE GIVEN DIMENSIONS.

{{ product.image | url_image('400x250x1') }}

imagex1.jpeg

RESIZE METHOD 2 (FIT): RESIZES THE IMAGE SO IT WILL FIT THE GIVEN DIMENSIONS.

{{ product.image | url_image('400x250x2') }}

imagex2.jpeg

RESIZE METHOD 3 (FIT): RESIZES THE IMAGE SO IT WILL FIT THE GIVEN DIMENSIONS AND REMOVES WHITE SPACE.

{{ product.image | url_image('400x250x3') }}

imagex3.jpeg

RESIZE METHOD 4 (EXACT): STRETCHES THE IMAGE SO IT WILL FIT THE GIVEN DIMENSIONS.

{{ product.image | url_image('300x150x4') }}

imagex4.jpeg

The second argument can be used for generating a SEO friendly URL:

{{ product.image | url_image('200x200x1', product.title) }}

Output:

http://cdn.webshopapp.com/i/zzhmyv/200x200x1/seo-friendly-product-title.jpg

url_encode

The url_encode filter URL encodes a given string.

{{ data | url_encode }}

Money filters

money

The money filter automatically converts a decimal number to a printable price.

{{ product.price.price | money }}

Output:

€29.95

money_with_currency

The money_with_currency filter behaves the same as the money filter except that it will also add the currency code behind the price.

{{ product.price.price | money_with_currency }}

Output:

€29.95 EUR

money_without_currency

The money_without_currency filter behaves the same as the money filter except that it will remove the currency sign.

{{ product.price.price | money_without_currency }}

Output:

29.95

Math filters

length

The length filters returns the number of items of a sequence or mapping, or the length of a string.

{% if users | length > 10 %} ...{% endif %}

What's next?

Have more questions? Submit a request