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'

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

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>

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.

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