adjust_date

Description

Add or subtract days, months or years to a date

Syntax

{{ <date> | adjust_date: <number>, <unit> }}

Examples

One month later: {{ today | adjust_date: 1, 'month' }}
4 days ago: {{ today | adjust_date: -4, 'day' }}

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'

beginning_of_day / beginning_of_week / beginning_of_month / beginning_of_year

Description

Return a new date/time at the start of the day/week/month/year.

Syntax

{{ <date> | beginning_of_day }}
{{ <date> | beginning_of_week }}
{{ <date> | beginning_of_month }}
{{ <date> | beginning_of_year }}

Examples

{{ today | beginning_of_day }}
{{ current_news.posted_at | beginning_of_month }}

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

end_of_day / end_of_week / end_of_month / end_of_year

Description

Return a new date/time representing the end of the day/week/month/year

Syntax

{{ <date> | end_of_day }}
{{ <date> | end_of_week }}
{{ <date> | end_of_month }}
{{ <date> | end_of_year }}

Examples

{{ today | end_of_month }}
{{ current_news.posted_at | end_of_week }}

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>

in_groups_of

Description

Splits an array into nested arrays with the length of the specified value. By default it pads the final array with nil values as required. Use the fill_with argument to control the padding.

Syntax

{% comment %} list is [1,2,3,4,5,6,7,8,9] {% endcomment %}

{% comment %} Without fill_with argument {% endcomment %}
{% assign grouped_list = list | in_groups_of: 4 %}
{% comment %} grouped_list is now [[1,2,3,4], [5,6,7,8], [9, nil, nil, nil]] {% endcomment %}

{% comment %} fill_with: false {% endcomment %}
{% assign grouped_list = list | in_groups_of: 4, fill_with: false %}
{% comment %} grouped_list is now [[1,2,3,4], [5,6,7,8], [9]] {% endcomment %}

{% comment %} fill_with: value {% endcomment %}
{% assign grouped_list = list | in_groups_of: 4, fill_with: 'x' %}
{% comment %} grouped_list is now [[1,2,3,4], [5,6,7,8], [9, 'x', 'x', 'x']] {% endcomment %}

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