Filters
auto_discovery_link_tag
Description
Return a link tag that browsers and news readers can use to auto-detect an RSS or ATOM feed.
Syntax
{{ <url> | auto_discovey_link_tag: <options> }}
Example
{{ '/projects/atom' | auto_discovery_link_tag: 'rel:alternate', 'type:application/atom+xml', 'title:A title' }}
<link rel="alternate" type="application/atom+xml" title="A title" href="/projects/atom" />
Options
Name | Type | Description |
---|---|---|
title | String | By default, its value is 'RSS' |
rel | String | By default, its value is 'alternate' |
type | String | By default, its value is 'application/rss+xml' |
concat
Description
Append strings passed in args to the input.
Syntax
{{ <string> | concat: <array of strings> }}
Example
{{ 'hello' | concat: 'world', 'yeah' }}
helloworldyeah
dasherize
Description
Replace underscores and spaces with dashes in the string.
Syntax
{{ <string> | dasherize }}
Example
{{ 'hello_world' | dasherize }}
hello-world
default
Description
Return the value parameter if the input is either null or empty.
Syntax
{{ <object> | default: <value> }}
Example
(if the value of params.author is null)
{{ params.author | default: 'John Doe' }}
John Doe
default_pagination
Description
Render the navigation for a paginated collection. Input is the variable returned by the paginate tag
Syntax
{{ <paginate object> | default_pagination: <options> }}
Example
{{ paginate | default_pagination: next: 'Next entries', previous: 'Previous entries' }}
Options
Name | Type | Description |
---|---|---|
previous | String | Label of the previous link. By default, the value of I18n.t('pagination.previous') is used. |
next | String | Label of the next link. By default, the value of I18n.t('pagination.previous') is used. |
distance_of_time_in_words
Description
The distance_of_time_in_words filter uses Rails' built-in distance_of_time_in_words helper to measure the difference between two dates and return a representation of that difference in words.
Syntax
{{ <date> | distance_of_time_in_words: <date_or_string> }}
The filter takes a date as input and another date as the first argument. The order of the dates doesn't matter; the earlier date can be either the input or the argument.
Examples
{{ "2013/04/05" | distance_of_time_in_words: "2007/06/29" }}
{{ "1776-07-04" | distance_of_time_in_words: "1789-07-14" }}
{{ "20/01/2013" | distance_of_time_in_words: "01/05/2014" }}
{{ "May 1, 2010" | distance_of_time_in_words: "June 5, 2010" }}
almost 6 years
about 13 years
over 1 year
about 1 month
Localization
The filter's output is automatically localized to the current locale. These localizations can be customized in the Rails locale files for your Locomotive Engine. Please use the below sample as a guide.
Locomotive comes with default translations for this filter for some languages. However, if you receive a "translation missing" error, you will need to add translations to the locale file of your locomotive engine.
en:
datetime:
distance_in_words:
about_x_hours:
one: about 1 hour
other: about %{count} hours
about_x_months:
one: about 1 month
other: about %{count} months
about_x_years:
one: about 1 year
other: about %{count} years
almost_x_years:
one: almost 1 year
other: almost %{count} years
half_a_minute: half a minute
less_than_x_minutes:
one: less than a minute
other: less than %{count} minutes
less_than_x_seconds:
one: less than 1 second
other: less than %{count} seconds
over_x_years:
one: over 1 year
other: over %{count} years
x_days:
one: 1 day
other: ! '%{count} days'
x_minutes:
one: 1 minute
other: ! '%{count} minutes'
x_months:
one: 1 month
other: ! '%{count} months'
x_seconds:
one: 1 second
other: ! '%{count} seconds'
encode
Description
Escape an URI. Useful when using Liquid to generate a JSON response.
Syntax
{{ <URI> | encode }}
Example
{{ "http:://www.example.com?key=hello world" | encode }}
http%3A%3A%2F%2Fwww.example.com%3Fkey%3Dhello+world
first
Description
Return the first occurrence of the input object. If the object is a String, it returns the first letter. If it is an Array, the first entry is returned. If the input is a collection, the first method is called on that collection.
Syntax
{{ <string_or_array_or_collection> | first }}
Examples
{{ [42, 0] | first }}
{{ 'Hello World' | first }}
42
H
flash_tag
Description
Embed a flash movie into a page.
Syntax
{{ <url> | flash_tag: <options> }}
Example
{{ 'http://youtube.com?...' | flash_tag: width: '100px', height: '50px' }}
Options
Name | Type | Description |
---|---|---|
width | String | pixel or % |
height | String | pixel or % |
format_date
Description
alias for localized_date.
Syntax
{{ <date> | format_date: <locale> }}
image_tag
Description
Build the HTML img tag.
Syntax
{{ <url> | image_tag: <options> }}
Example
{{ 'http://placehold.it/350x150' | image_tag: 'alt:hello world' }}
outputs
<img src="http://placehold.it/350x150" alt="hello world" />
Options
Name | Type | Description |
---|---|---|
alt | String | |
title | String |
javascript_tag
Description
Build the link tag of a theme stylesheet.
Syntax
{{ <path_to_a_theme_asset_or_url> | javascript_tag }}
Example
{{ 'application.js' | javascript_tag }}
<script src="/sites/<site_id>javascripts/application.js" type="text/javascript"></script>
javascript_url
Description
Return the url of a theme asset javascript.
Syntax
{{ <path_to_a_theme_asset> | javascript_url }}
Example
{{ 'application.js' | javascript_url }}
/sites/<site_id>/theme/javascripts/application.js
last
Description
Return the last occurrence of the input object. If the object is a String, it returns the last letter. If it is an Array, the last entry is returned. If the input is a collection, the last method is called on that collection.
Syntax
{{ <string_or_array_or_collection> | last }}
Examples
{{ [42, 0] | last }}
{{ 'Hello World' | last }}
0
d
localized_date
Description
Pretty print a date.
Syntax
{{ <date> | localized_date: <format>(, <locale>) }}
Examples
{{ today | localized_date: '%d %B' }}
{{ today | localized_date: '%d %B', 'fr' }}
01 September
01 septembre
Options
Name | Type | Description |
---|---|---|
format | String | It depends on the current locale. For the 'en' locale, it is "%m/%d/%Y". Read the syntax reference. |
locale | String | Optional. By default, it is the current locale. |
markdown
Description
The markdown filter converts text formatted with Markdown to HTML using the ruby gem Redcarpet. For a complete explanation of markdown syntax, please visit the Markdown Syntax.
Syntax
{{ <markdown_code> | markdown }}
Example
{{ '# Header' | markdown }}
<h1>Header</h1>
money
Description
Formats a number into a currency string (e.g., $13.65). You can customize the format in the options hash.
Examples
{{ product.price | money }}
{{ product.price | money: unit: "€", format: "%n %u" }}
multi_line
Description
Insert a
tag in front of every \n linebreak character.
Syntax
{{ <string> | multi_line }}
Example
outputs
{{ "hello\nworld" | multi_line }}
hello<br/>world
parse_date
Description
Parse the given representation of date, and create a date object.
Syntax
{{ '2015-09-26' | parse_date }}
Options
Name | Type | Description |
---|---|---|
format | String | By default, it uses a localized format. For instance, in English, that will be: "%m/%d/%Y". You're free to use any format you want. |
parse_date_time
Description
Parse the given representation of date time, and create a date time object.
Syntax
{{ '2015-09-26 10:42pm' | parse_date_time }}
Options
format | String | By default, it uses a localized format. For instance, in English, that will be: "%m/%d/%Y %H:%M". You're free to use any format you want. |
random
Description
Get a randomly number greater than or equal to 0 and strictly less than the max number passed in parameter.
Syntax
{{ <max_integer> | random }}
Example
{{ 10 | random }}
4
(or any numbers between 0 and 9.)
resize
Description
Resize any image on the fly by calling behind the scene the DragonFly gem. The url to the dynamically resized image is returned. The processing relies on ImageMagick. Additional options like JPEG compression rate are supported.
Syntax
{{ <string> | resize: <resize_string>(, options) }}
Examples
{{ project.screenshot | resize: '100x100' }}
{{ 'http://example.com/images/banner.png' | resize: '300x50#' }}
{{ 'http://example.com/images/banner.png' | resize: '300x50#', optimize: 50 }}
By default, the Rack::Cache middleware is called for the caching. If you host your LocomotiveCMS on Heroku please visit this page for setup instructions.
Options
Name | Type | Description |
---|---|---|
resize_string | String | The ImageMagick geometry string. See the following link for examples. |
quality | Integer | Compress image, look here for meaning of the number. |
auto_orient | Boolean | Fix EXIF orientation issues, look here for details. |
strip | Boolean | Remove extra possibly unnecessary metadata, look here for details. |
progressive | Boolean | Make JPEG progressive, calling ImageMagick with -interlace Plane option. |
optimize | Integer | Shortcut to quality: and also applies strip and progressive. |
filters | String | Access to any ImageMagick arguments. |
shuffle
Description
Randomly sort an array. It also works with content entries if you've got a couple of them.
Examples
{% assign products = ['Product 1', 'Product 2', 'Product 3'] %}
{% assign random_products = products | shuffle %}
{% comment %}Take 5 random products{% endcomment %}
{% assign random_products = contents.products.all | shuffle | slice: 0, 5 %}
str_modulo
Description
Print the input string every modulo occurences.
Syntax
{{ <string> | str_modulo: <index>, <modulo> }}
Example
{{ 'odd' | str_modulo: 1, 2 }}
odd
Options
Name | Type | Description |
---|---|---|
index | Integer | The counter. Usually, the index variable within a for loop |
modulo | Integer | By default, it is the current locale |
stylesheet_tag
Description
Return the link tag of a theme stylesheet.
Syntax
{{ <path_to_a_theme_asset_or_url> | stylesheet_tag(: <media>) }}
Example
{{ 'application.css' | stylesheet_tag }}
<link href="/sites/<site_id>/theme/stylesheets/application.css" media="screen" rel="stylesheet" type="text/css" />
Options
Name | Type | Description |
---|---|---|
media | String | By default, its value is 'screen' |
stylesheet_url
Description
Return the url of a theme asset stylesheet.
Syntax
{{ <path_to_a_theme_asset> | stylesheet_url(: <media>) }}
Example
{{ 'application.css' | stylesheet_url }}
"/sites/<site_id>/theme/stylesheets/application.css"
textile
Description
The textile filter converts text formatted with Textile to HTML using the popular ruby gem RedCloth. For a complete explanation of textile syntax, please visit the Textile Reference Manual for RedCloth.
Syntax
{{ <string> | textile }}
Example
{{ 'h3. Header' | textile }}
<h3>Header</h3>
theme_image_tag
Description
Return the image tag of a theme image.
Syntax
{{ <path_to_a_theme_image> | theme_image_tag(: <options>) }}
Example
{{ 'banner.png' | theme_image_tag: 'alt:hello world' }}
<img src="/sites/<site_id>/theme/images/banner.png" alt="hello world" />
Options
Name | Type | Description |
---|---|---|
alt | String | |
title | String |
theme_image_url
Description
Return the url of a theme image.
Syntax
{{ <path_to_a_theme_image> | theme_image_url }}
Example
{{ 'banner.png' | theme_image_url }}
/sites/<site_id >/theme/images/banner.png
translate
Description
When your site is localized, hard-coded static strings are not permitted. That's why you need to use translations (see the localization guide)).
Syntax
{{ <string> | translate(: <options>) }}
Options
Name | Type | |
---|---|---|
locale | String |
Examples
{{ 'hello_world' | translate }}
{{ 'hello_world' | translate: locale: 'fr' }}
Assuming that in the config/translations.yml, the following entry exists
post_count_zero:
en: "{{ name }} has no posts"
fr: "{{ name }} n'a aucun artucle"
post_count_one:
en: "{{ name }} has one post"
fr: "{{ name }} a un seul article"
post_count_two:
en: "{{ name }} has two posts"
fr: "{{ name }} a deux articles"
post_count_other:
en: "{{ name }} has {{ count }} posts"
fr: "{{ name }} a {{ count }} articles"
{{ 'post_count' | translate: count: posts.count, name: 'John' }}
underscore
Description
Make an underscored, lowercase form from the expression in the string.
Syntax
{{ <string> | underscore }}
Example
{{ 'FooBar' | underscore }}
foo_bar
Updated about 6 years ago