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

NameTypeDescription
titleStringBy default, its value is 'RSS'
relStringBy default, its value is 'alternate'
typeStringBy 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

NameTypeDescription
previousStringLabel of the previous link. By default, the value of I18n.t('pagination.previous') is used.
nextStringLabel 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

NameTypeDescription
widthStringpixel or %
heightStringpixel 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

NameTypeDescription
altString
titleString

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

NameTypeDescription
formatStringIt depends on the current locale. For the 'en' locale, it is "%m/%d/%Y". Read the syntax reference.
localeStringOptional. 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.

Options

NameTypeDescription
delimiterStringSets the symbol to be used between groups of thousands in the number.

Default: “,”
formatStringSets the format for non-negative numbers.

Values are:
%u - currency symbol
%n - number

Default: “%u%n”
localeStringSets the locale to be used for formatting.

Default: Current Locale
negative_formatStringSets the format for negative numbers.

Values are:
%u - currency symbol
%n - number

Default: prepends a hyphen to the formatted number defined by format
precisionIntegerSets the number of decimal places. (Rounding is automatically performed).

Default: 2
raiseBooleanIf true, raises InvalidNumberError when the argument is invalid.
separatorStringSets the symbol to be used between the integer and fractional part of the number.

Defaults: “.”
unitStringSets the currency symbol.

Default: “$”

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

NameTypeDescription
formatStringBy 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

formatStringBy 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

NameTypeDescription
resize_stringStringThe ImageMagick geometry string. See the following link for examples.
qualityIntegerCompress image, look here for meaning of the number.
auto_orientBooleanFix EXIF orientation issues, look here for details.
stripBooleanRemove extra possibly unnecessary metadata, look here for details.
progressiveBooleanMake JPEG progressive, calling ImageMagick with -interlace Plane option.
optimizeIntegerShortcut to quality: and also applies strip and progressive.
filtersStringAccess 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

NameTypeDescription
indexIntegerThe counter. Usually, the index variable within a for loop
moduloIntegerBy 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

NameTypeDescription
mediaStringBy 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

NameTypeDescription
altString
titleString

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

NameType
localeString

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 article"
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