# Filters
Output markup can take filters, which modify the result of the output statement. You can invoke filters by following the output statement's main expression with:
- A pipe character (
|
) - The name of the filter
- Optionally, a colon (
:
) and a comma-separated list of additional parameters to the filter. Each additional parameter must be a valid expression, and each filter pre-defines the parameters it accepts and the order in which they must be passed.
Filters can also be chained together by adding additional filter statements (starting with another pipe character). The output of the previous filter will be the input for the next one.
Hello {{ 'tobi' | upcase }}
Hello tobi has {{ 'tobi' | size }} letters!
Hello {{ '*tobi*' | textilize | upcase }}
Hello {{ 'now' | date: "%Y %h" }}
A filter is a Ruby method that takes one or more parameters and returns a value. Parameters are passed to filters by position: the first parameter is the expression preceding the pipe character, and additional parameters can be passed using the name: arg1, arg2
syntax described above.
# Append
Add a string e.g. {{ 'foo' | append:'bar' }} #=> 'foobar'
# Capitalize
Capitalize the word in the input sentence.
# Ceiling
Round a decimal number up to the next integer, e.g..
{{ 4.6 | ceil }} #=> 5
# Date
Format a date (syntax reference (opens new window))
# Default
Returns the given variable unless it is null or empty string, then returns the given value, e.g..
{{ undefined_variable | default: "Default value" }} #=> "Default value"
.
# Divided by
Division of integers e.g. {{ 10 | divided_by:3 }} #=> 3
# Downcase
Converts an input string to lowercase.
# Escape eleven
Returns an escape version of html without affecting existing escape entities.
# Escape
HTML escape to a string.
# First
Get the first element of the passed array.
# Floor
Round a decimal number down to the nearest integer, e.g..
{{ 4.6 | floor }} #=> 4
# Format Date
Formats a date with the location of the site, uses the same syntax as date
.
# Join
Joins array elements with a certain character between them.
# Last
Get the last element of the passed array.
# Lstrip
Removes all blanks from the beginning of a string.
# Map
Map/collect an array into a given property.
# Minus
Subtract e.g. {{ 4 | minus:2 }} #=> 2
.
# Module
Modulo e.g. {{ 3 | modulo:2 }} #=> 1
.
# Newline to br
Replace each newline with HTML space.
# Plus
Sum e.g. {{ '1' | plus:'1' }} #=> 2
, {{ 1 | plus:1 }} #=> 2
.
# Prepend
Prepends a string e.g. {{ 'bar' | prepend:'foo' }} #=> 'foobar'
# Remove First
Remove the first occurrence e.g. {{ 'barbar' | remove_first:'bar' }} #=> 'bar'
.
# Remove
Remove all occurrences e.g. {{ 'foobarfoobar' | remove:'foo' }} #=> 'barbar'
.
# Replace First
Replaces the first occurrence e.g. {{ 'barbar' | replace_first:'bar','foo' }} #=> 'foobar'
.
# Replace
Replace all occurrences e.g. {{ 'foofoo' | replace:'foo','bar' }} #=> 'barbar'
.
# Reverse
Inverts the given array.
# Round
Round to the nearest whole number or to the specified number of decimal places e.g. {{ 4.5612 | round: 2 }} #=> 4.56
.
# Rstrip
Removes all whitespace from the end of a string
# Script Tag
Generates the HTML <script>
for a JavaScript template, taking as parameters the URL and attributes of the form attr: 'value'
, e.g. {{ 'my-js-url' | script_tag: async: 'async', defer: 'defer' }}
=> <script src='my-js-url' type='text/javascript' async='async' defer='defer'>
.
# Size
Return the size of an array or string
# Slice
Split a string. The inputs are an offset and a length, e.g. {{ "hello" | slice: -3, 3 }} #=> llo
# Sort
Sort array elements
# Split
Split a string into a matching pattern e.g. {{ "a~b" | split:"~" }} #=> ['a','b']
.
# Times
Multiply e.g {{ 5 | times:4 }} #=> 20
.
# Truncate
Restricts a string to x characters. It also accepts a second parameter to be appended to the string e.g. {{ 'foobarfoobar' | truncate: 5, '.' }} #=> 'foob.'
.
# Truncatewords
Restrict a string to x words
# Uniq
Removes duplicate elements from an array, optionally using a given property to check for uniqueness.
# Upcase
Converts an input string to uppercase
# URL Encode
Encodes a string to URL
# Commerce
These are the liquid filters that alter values related to Trade.
# Format Currency
Adds currency formatting to a value. e.g. {{ 4 | format_currency }} => $4
.
{{ 1890.5123 | format_currency: unit: '¥', separator: ',', delimiter: '.', precision: 3 }} = ¥1.890,512
Important
This filter determines the currency format and takes precedence over any other currency settings.
If you do not specify currency parameters with the currency filter, Modyo uses the payment (opens new window) settings of the realm.
If the site does not have a realm associated with it, and you do not specify parameters, the predefined format of the site's language will be applied.
Parameters:
- unit - currency symbol.
- separator - decimal separator.
- delimiter - thousands separator.
- precision - number of decimal digits.
# Content
These are the liquid filters that alter values related to the Content module in Modyo Platform.
# Asset Image
Returns the tags of an image using its uuid from the File Manager. e.g. {{ uuid | asset_image }}
# Asset Link
Returns the URL of an image using its File Manager uuid. e.g. {{ uuid | asset_link: 'This is a link to the asset' }}
# Asset URL by UUID
Returns the URL of an image using its File Manager uuid. e.g. {{ uuid | asset_url_by_uuid }}
# Asset Video
Returns the tags of a video using its uuid from the File Manager. e.g. {{ uuid | asset_video: 350, 300 }}
Parameters:
- uuid (String) - asset uuid
- width (Integer) (default: 300) - width
- height (Integer) (default: 200) - length
# By Category
Returns a list of Entries belonging to the selected Category. e.g. {% assign filtered_entries = entries | by_category: 'category2,category1,category3' %}
Parameters:
- entries (ArrayEntry) - array with entries
- list (String) (default: '') - String with comma separated categories.
# By Lang
Returns a list of Entries belonging to a selected language. e.g. {% assign entries = widget.entries | locale: 'es,en,pt' %} => entries
Parameters:
- entries (ArrayEntry) - array with entries
- locale (String) (default: '') - String with comma-separated languages.
# By Slug
Returns a list of Entries belonging to a selected slug. e.g. {% assign filtered_entries = entries | by_slug: 'slug2,slug1,slug' %}
Parameters:
- entries (ArrayEntry) - array with entries
- slug (String) (default: '') - Slug separated by comma.
# By Tag
Returns a list of Entries belonging to a selected tag. e.g. {% assign entries = widget.entries | by_tag: 'tag2,tag1,tag3' %} => entries
.
Parameters:
- entries (ArrayEntry) - array with entries
- locale (String) (default: '') - String with tags separated by comma.
# By Type
Returns a list of Entries belonging to a selected Content Type. e.g. {% assign filtered_entries = entries | by_type: 'type2,type1,type3' %}
Parameters:
- entries (ArrayEntry) - array with entries
- locale (String) (default: '') - String with comma-separated content types.
# Filter By
Returns a list of Entries that match a filter. e.g. {% assign entries = widget.entries | filter_by: field: 'name', eq: 'entry3Cat3' %}
Parameters:
- entries (ArrayEntry) - array with entries
- opts (Hash) (default: {}) - hash with field and eq as value
# Filter By Query String
Returns a list of Entries that match a query. Logical operators, various meta fields, URLs, or Liquid tags can be used.
Operators:
- gt, lt, in, all, nin
Fields:
- meta.category meta.category_slug meta.category_name meta.uuid meta.name meta.name meta.created_at meta.updated_at meta.published_at meta.unpublished_at meta.slug meta.tag
Url examples:
- https://company.site.com/testsite?meta.category_slug=category3
- https://company.site.com/testsite?meta.tag=tag_name
- https://company.site.com/testsite?meta.tag[in][]=tag1_name&meta.tag[in][]=tag2_name
- https://company.site.com/testsite?meta.created_at=1987-11-19T13:13:13
e.g. {{% assign entries = widget.entries | filter_by_query_string %}
Parameters:
- entries (ArrayEntry) - array with entries
# From Published Date
Returns a list of Entries that have a publication date more recent than the limit. e.g. {% assign entries = widgets.entries | from_published_date: date %}
Parameters:
- entries (ArrayEntry) - array with entries
- date (Datetime)(default: Time.zone.now) - deadline date
# Limit
Limits the number of results. e.g. {{ entries | limit: 1 }}
Parameters:
- object(Array) - array
- limit (Integer)(default: 1) - limit of results
# Paginated
Separates the results into pages. e.g. {{ objects | paginated: 10, 2 }}
Parameters:
- object(Array) - array
- per_page (Integer) (default: 10) - objects per page
- page (Integer) (default: 1) - page number to display
# Sort By
Separates the results into pages. e.g. {{ objects | paginated: 10, 2 }}
Parameters:
- object(Array) - array
- per_page (Integer) (default: 10) - objects per page
- page (Integer) (default: 1) - page number to display
# To Published Date
Returns a list of Entries that have a publication date older than the limit. e.g. {% assign entries = widgets.entries | to_published_date: date %}
Parameters:
- entries (ArrayEntry) - array with entries
- date (Datetime)(default: Time.zone.now) - deadline date
# Crypto
These are liquid filters that alter values related to Cryptology.
# Base64 Decode
Returns the Base64-decoded value of a string e.g. {% 'Hello world' | base64_encode %} # => 'SGVsbG8gd29ybGQ='
.
# Base64 Encode
Returns the Base64-encoded value of a string e.g..
{% 'SGVsbG8gd29ybGQ=' | base64_decode %} # => 'Hello world'
.
# HMAC SHA1
Returns the SHA-1 hash using a message authentication code (HMAC) of a string. e.g. {% 'Hello world' | hmac_sha1: 'key' %} # => '2a73959742baf046e6e2e27e5ee94bcff0af31b1'
# HMAC SHA256
Returns the SHA-256 hash using a message authentication code (HMAC) of a string. e.g. {% 'Hello world' | hmac_sha256: 'key' %} # => 'a82b2e160edaf92a6589dc11160d2a10c04449840a58717db308c1ee3512b039'
# MD5
Returns the MD5 hash of a string. e.g. {% 'Hello world' | md5 %} # => '3e25960a79dbc69b674cd4ec67a72c62'
# SHA1
Returns the SHA-1 hash of a string. e.g. {% 'Hello world' | sha1 %} # => '7b502c3a1f48c8609ae212cdfb639dee39673f5e'
.
# SHA 256
Returns the SHA-256 hash of a string. e.g. {% 'Hello world' | sha256 %} # => '64ec8888ca00b268e5ba1a35678a1b5316d212f4f366b2477232534a8aeca37f3c'
# CSS
These are the liquid filters that alter CSS-related values in Modyo Platform.
# Brighten
Adds brightness to a color. e.g. {{ '#00ff00' | brighten: 15 }} #=> '#26ff26'
# Darken
Reduces brightness to one color. e.g. {{ '#00ff00' | darken: 15 }} #=> '#00b300'
# Desaturate
Desaturation of a color. e.g. {{ '#00ff00' | desaturate: 15 }} #=> '#13ec13'
# Grayscale
Converts a color to grayscale. e.g. {{ '#00ff00' | grayscale }} #=> '#80808080'
# Lighten
Lighten a color. e.g. {{ '#00ff00' | lighten: 15 }} #=> '#4dff4d'
.
# Opacity
Modifies the opacity of a color. e.g. {{ '#00ff00' | opacity: 0.5 }} #=> 'rgba(0, 255, 0, 0, 0.5)'
.
# RGB
Transforms a color to its RGB equivalent. e.g. {{ '#00ff00' | rgb }} #=> 'rgb(0, 255, 0)'
.
# Saturate
Saturate a color. e.g. {{ '#00ff00' | saturate: 15 }} #=> '#00ff00'
# Spin
Rotate clockwise one color.
{{ '#00ff00' | spin: 15 }} #=> 'rgba(0, 255, 0, 0.5)'
.
# Location
These are the liquid filters that alter values related to Geolocation in Modyo Platform.
# Dynamic Map
Returns a dynamic map from Google Maps. e.g. {{ locations | dynamic_map: '600x300', 'true', 'roadmap', true}}
.
Parameters
- locations (ArrayHash) - Array of hashes with latitude and longitude points.
- size (String) (default: '600x300') - Size of the map in pixels
- zoom (String) (default: 10) - Zoom level for the map
- type (String) (default: 'roadmap') - Type of map
- icon (String) (default: '') - Icon for the map
- controls (String) (default: true) - Navigation controls for the map
# Static Map
Returns a static map from Google Maps. e.g. {{ locations | static_map: '600x300', 'true', 'roadmap'}}
Parameters
- locations (ArrayHash) - Array of hashes with latitude and longitude points.
- size (String) (default: '600x300') - Size of the map in pixels
- zoom (String) (default: 10) - Zoom level for the map
- type (String) (default: 'roadmap') - Type of map
- icon (String) (default: '') - Icon for the map
# Menu Items
These are the liquid filters that alter values related to menu items in Modyo Platform.
# Active Page
Determines if a URL item is active. Returns 'active' when active. e.g. {{ 'company.modyo.com/jobs' | active_page: 'company.modyo.com/jobs' }} #=> 'active'
# Item Rel
Returns 'noopener noreferrer' if a link is "_blank". e.g. {{ '_blank' | item_rel }} #=> 'noopener noreferrer'
.
# Resolve URL
Resolves the URL of a path and base URL. e.g. {{ 'dynamic_bank' | resolve_url: 'company.modyo.com' }} #=> 'company.modyo.com/dynamic_bank'
.
# Visible Items
Returns a list of visible items in a list of items. e.g. {{ items | visible_items }}
# Site
These are the liquid filters that alter values related to Sites in Modyo Platform.
# Asset Image Tag
Generates the HTML tag of an image. e.g. {{ asset | asset_image_tag: 'original' }}
# Asset Thumbnail Link Tag
Generates the HTML tag of the thumbnail of an image. e.g. {{ asset | asset_thumbnail_link_tag: 'class', 'target' }}
Parameters
- asset - Object of type Asset
- classes (String) (default: '') - additional HTML classes (optional)
- target (String) (default: '') - additional HTML targets (optional)
# Asset URL
Generates the URL of an Asset object. e.g. {{ {{ asset | asset_url: 'original' }}
# Audio Player
Generates the URL of an Audio object. e.g. {{ {{ audio1 | audio_player }}
# Bar Code
Generates the URL of a barcode. e.g. {{ value | bar_code: 320, 320 }}
Parameters
- value (String) - Value of the bar code
- width (Integer) (default: 100) - Width
- height (Integer) (default: 100) - Height
# Button To
Generates a button. e.g. {{ 'Hello World' | button_to: 'http://www.google.com' }}
# Cookie Value
Returns the value of a cookie. e.g. {{ 32 | cookie_value }}
# Embedded Video
Returns the URL of an embedded video. e.g. {{ movie2 | embedded_video }}
# Escape JS
Avoid interpreting JavaScript code. e.g. {{ '<script>alert("hello world");</script>' | escape_js }}
# Format Date
Translates a date to another format. e.g. {{ time | format_date: '%e %b, %Y' }}
Parameters
- time (DateTime) - Date
- format_date (String) (default: '') - The new format for the date
# Format DateTime
Translates a date to DateTime format. e.g. {{ time | format_datetime }}
.
# Format Short Date
Translates a date to a shortened format. dd-mm-yyyy e.g. {{ time | format_short_date }}
# Get Session ID
Returns the session ID. e.g. {{ get_session_id }}
# Asset Image Tag
Returns the tag of an image. e.g. {{ url | asset_image_tag }}
# Link To
Add an anchor link tag. e.g. {{ 'Hello World' | link_to: 'http://www.google.com', 'this is my alt', 'small', '_blank' }}
Parameters
- text (String) (default: '') - text for the link
- link (String) (default: '/') - url for the link
- alt (String) (default: '') - alt for the link
- class (String) (default: '') - class for the link
- target (String) (default: '') - target for the link
# Notifications
Display the flash message variable. e.g. {{ 'alert-error' | notifications }}
# Primary button to
Generates a button of primary type. e.g. {{ 'Hello World' | primary_button_to: 'http://www.google.com', 'large' }}
Parameters
- text (String) (default: '') - text for the link
- link (String) (default: '/') - url for the link
- size (String) (default: 'large') - size for the link
# QR Code
Generates a qr code. e.g {{ value | qr_code: 4, 320, 320 }}
Parameters
- value (String) (default: '') - value for qr
- qr_size (Integer) (default: 4) - size of the qr
- width (Integer) (default: 100) - width of qr
- height (Integer) (default: 100) - length of the qr
# Sanitize HTML
Sanitize the HTML tags of a String. e.g. {{ '<script>Hello World</script>' | sanitize }} #=> 'Hello World'
.
# Script Tag
Add a script tag. e.g. {{ 'test-script' | script_tag }}
# Search Box
Add a search engine field. e.g. {{ 'testsite' | search_box }}
# Strftime
Converts a datetime to String format. e.g. {{ time | strftime: '%m/%d/%y' }}
# Strip tag
Removes all HTML tags and their contents from a String. e.g. {{ '<script>Hello World</script>' | strip_tags }} #=> ""
# Stylesheet Tag
Generates the HTML <link>
for a CSS template, taking as parameters the URL and attributes of the form attr: 'value'
, e.g. {{ 'my-css-url' | stylesheet_tag: media: 'screen', title: 'color style' }}
=> <link href='my-css-url' rel='stylesheet' type='text/css' media='screen' title='color style' />
# Javascript Theme
Add a theme tag in Javascript. e.g. {{ 'home-page-javascript' | theme_javascript }}
.
# Theme Stylesheet
Add a theme tag in CSS. e.g. {{ 'home-page-stylesheet' | theme_stylesheet }}
# Time Ago in Words
Converts a String date to words. e.g. {{ '01-02-2019' | time_ago_in_words }} #=> 'over 3 years'
.
# Translate
Resolves the translation text for Site keys. Custom values will be returned if they exist. e.g. {{ 'admin.logs.errors.no_logs_yet' | translate }}
# Truncate HTML
Returns a String after truncating it. e.g. {{ html | truncate_html: 10 }}
# Video Player
Adds a video player in HTML code using a File Manager asset. e.g. {{ movie1 | video_player: 320, 320 }}
Parameters
- video (Asset) - Video type object in the File Manager
- width (Integer) - width for the video
- height (Integer) - video length
# User
These are the liquid filters that alter values related to Users.
# Image For
Displays the HTML code for a user's image. e.g. {{ user | avatar_for: 'C50x50', true }}
Parameters
- user - User object
- size (Integer) (default: 'C50x50') - Image size
- link (Boolean) (default: true) - True adds a link to the user's profile.
# Default Avatar Image
Display the default avatar image. e.g. {{ user | avatar_for: 'C50x50' }}
Parameters
- user - User object
- size (Integer) (default: 'C50x50') - Image size
# Widget
These are the liquid filters that alter values related to Widgets.
# Entry Limit
Determines the limit of entries for a widget. e.g. {{ widget1 | entry_limit }}
# Resolve Home Widget List
Returns a list of all widgets belonging to a Site. e.g. {{ site | resolve_home_widget_list }}
# Resolve Me Widget List
Returns a list of all widgets belonging to a "me" page. e.g. {{ site | resolve_me_widget_list }}
# Resolve Widget List
Returns a list of all widgets belonging to a page. e.g. {{ site | resolve_widget_list: page }}
Parameters
- site (Site) - Object of type Site
- page (Page) - Object of type Page