COS Documentation

Search HubSpot Designers Site

HubL Filters and Functions

Filters and functions can transform or alter the value of a template variable. Here are examples of how filters are used: This will print out the date of the blog post in "Month day, Year" format: {{ content.publish_date_local_time|datetimeformat("%B %e, %Y") }} or {{ datetimeformat(content.publish_date_local_time) }}

List of Builtin Filters

abs(n)

Absolute value of a number.

Example: Ensure a number is positive.

{{ my_num|abs }}

add(n, a)

Adds a numeric value to another numeric value.

Example: Increase a value by a certain amount.

{{ my_num|add(5) }}

batch(items, n, str)

A filter that batches items. It works pretty much like slice just the other way round. It returns a list of lists with the given number of items. If you provide a second parameter this is used to fill up missing items.

Example:

<table>
  {%- for row in items|batch(3, ' ') %}
    <tr>
      {%- for column in row %}
        <td>{{ column }}</td>
      {%- endfor %}
    </tr>
  {%- endfor %}
</table>

capitalize(s)

Capitalize a value. The first character will be uppercase, all others lowercase.

Example: Capitalize the first letter of a blog author's name

{{ content.blog_post_author.display_name|capitalize }}

color_variant(hex_color, rgb_ajustment)

Create a lighter or darker version of the given hex color. The first parameter is the hex color (for example ("#FFDDFF"). The second parameter is the amount to adjust it by, from 0 to 255. So let us say you have the color bright red, which is #FF0000 in hex ( 255,0,0 in RGB). Calling color_variant("#FF0000", -32) will subtract 32 from the RGB value. That will result it the new color variant being 222,0,0 in RGB, and the function will output the new hex value of #DD0000.

count(object)

Return the number of items of a sequence or mapping.

Example: Return the number of comments for an individual blog article

{{ content.comment_list|count }}

datetimeformat(format_string)

Let's say I published a blog post to go out on the 2nd of December in 2013. The following markup: {{ content.publish_date_local_time|datetimeformat('%B %e, %Y') }} will output "December 2, 2013"

The format string accepts the following formatting parameters:

DirectiveMeaningExample
%a Weekday as locale’s abbreviated name.
Sun, Mon, ..., Sat (en_US);
So, Mo, ..., Sa (de_DE)
%A Weekday as locale’s full name.
Sunday, Monday, ..., Saturday (en_US);
Sonntag, Montag, ..., Samstag (de_DE)
%w Weekday as a decimal number, where 0 is Sunday and 6 is Saturday. 0, 1, ..., 6
%d Day of the month as a zero-padded decimal number. 01, 02, ..., 31
%e Day of the month as a decimal number, without padding. 1, 2, ..., 31
%b Month as locale’s abbreviated name.
Jan, Feb, ..., Dec (en_US);
Jan, Feb, ..., Dez (de_DE)
%B Month as locale’s full name.
January, February, ..., December (en_US);
Januar, Februar, ..., Dezember (de_DE)
%m Month as a zero-padded decimal number. 01, 02, ..., 12
%y Year without century as a zero-padded decimal number. 00, 01, ..., 99
%Y Year with century as a decimal number. 1970, 1988, 2001, 2013
%H Hour (24-hour clock) as a zero-padded decimal number. 00, 01, ..., 23
%I Hour (12-hour clock) as a zero-padded decimal number. 01, 02, ..., 12
%k The hour (24-hour clock) as a decimal number (range 0 to 23); single digits are preceded by a blank. 0, 1, ..., 24
%l (note this is a lower case L) The hour (12-hour clock) as a decimal number (range 1 to 12); single digits are preceded by a blank. 1, 2, ..., 12
%p Locale’s equivalent of either AM or PM.
AM, PM (en_US);
am, pm (de_DE)
%M Minute as a zero-padded decimal number. 00, 01, ..., 59
%S Second as a zero-padded decimal number. 00, 01, ..., 59
%f Microsecond as a decimal number, zero-padded on the left. 000000, 000001, ..., 999999
%z UTC offset in the form +HHMM or -HHMM (empty string if the the object is naive). (empty), +0000, -0400, +1030
%Z Time zone name (empty string if the object is naive). (empty), UTC, EST, CST
%j Day of the year as a zero-padded decimal number. 001, 002, ..., 366
%U Week number of the year (Sunday as the first day of the week) as a zero padded decimal number. All days in a new year preceding the first Sunday are considered to be in week 0. 00, 01, ..., 53
%W Week number of the year (Monday as the first day of the week) as a decimal number. All days in a new year preceding the first Monday are considered to be in week 0. 00, 01, ..., 53
%c Locale’s appropriate date and time representation.
Tue Aug 16 21:30:00 1988 (en_US);
Di 16 Aug 21:30:00 1988 (de_DE)
%x Locale’s appropriate date representation.
08/16/88 (None);
08/16/1988 (en_US);
16.08.1988 (de_DE)
%X Locale’s appropriate time representation.
21:30:00 (en_US);
21:30:00 (de_DE)
%% A literal '%' character. %

default(value, default_value=u'', boolean=False)

If the value is undefined it will return the passed default value, otherwise the value of the variable:

{{ my_variable|default('my_variable is not defined') }}

This will output the value of my_variable if the variable was defined, otherwise 'my_variable is not defined'. If you want to use default with variables that evaluate to false you have to set the second parameter to true:

{{ ''|default('the string was empty', true) }}

Aliases : d

dictsort(dict, case_sensitive=false, sort_by_key=true)

Sorts the given dict.

Example: Sort a dict in a case-insensitive way, by key

{{ {'foo':'bar', 'other':'val'}|dictsort }}

divide(n, divisor)

Divides a number by a specified divisor.

Example: Divide a value in half

{{ my_numeric_val|divide(2) }}

divisible(n, divisor)

Returns whether the given value is evenly divisible by the given divisor.

Example: True if the value is even

{{ my_numeric_val|divisible(2) }}

escape(s)

Convert the characters &, <, >, ‘, and ” in string s to HTML-safe sequences. Use this if you need to display text that might contain such characters in HTML. Marks return value as markup string.

alias: e

Example: Escape special characters in a blog author's name

{{ content.blog_post_author.display_name|escape }}

first(object)

Return the first item from a sequence or mapping.

Example: Return the first comment for an individual blog article

{{ content.comment_list|first }}

join(object, separator='', attr=None)

Joins the given sequence into a single string, with the specified separator. If attr is specified, then that attribute is joined from each given object.

Example: Join a list of commenter names

{{ content.comment_list|join(', ', 'author_name') }}

last(object)

Return the last item from a sequence or mapping.

Example: Return the last comment for an individual blog article

{{ content.comment_list|last }}

length(object)

Return the number of items of a sequence or mapping.

Example: Return the number of comments for an individual blog article

{{ content.comment_list|length }}

lower(s)

Convert a value to lowercase.

Example: Convert the topic tags for blog articles to lowercase

{{ topic.name|lower }}

random(seq)

Return a random item from the sequence.

Example: Randomly display a single blog post from the list of all posts on the listings page

{% for content in contents|random %}

reverse(value)

Reverse the object or return an iterator the iterates over it the other way round.

Example: Display the posts on the posts listings page in reverse order (oldest first)

{% for content in contents|reverse %}

split(value, separator=' ', limit=0)

Split a given string by the given separator into a list.

Example: Split a comma-separated string into a list to create a bulleted list.

<ul>{% for item in '1, 2, 3' | split(',') %} <li>{{ item }}</li>{% endfor %}</ul>

striptags(value)

Strip SGML/XML tags and replace adjacent whitespace by one space.

Example: Strip any HTML markup that may have been added in the comments form

{{ content.comments|striptags }}

title(s)

Return a titlecased version of the value. I.e. words will start with uppercase letters, all remaining characters are lowercase.

Example: Titlecase all blog article titles

{{ content.name|title }}

truncate(s, length=255, killwords=False, end='...')

Return a truncated copy of the element. The length is specified with the first parameter which defaults to 255. If the second parameter is true the filter will cut the text at length. Otherwise it will discard the last word. If the text was in fact truncated it will append an ellipsis sign ("..."). If you want a different ellipsis sign than "..." you can specify it using the third parameter. The truncate filter does not preserve any HTML tokens within the truncated text.

Example: Set a max length of 200 characters on blog post summary length for blog listings pages

{{ content.post_list_content|safe|truncate(200) }}

truncatehtml(s, length=255, end='...')

Return a truncated copy of the string, preserving any HTML tokens contained within. The length is specified with the first parameter which defaults to 255. If the text was in fact truncated it will append an ellipsis sign ("..."). If you want a different ellipsis sign than "..." you can specify it using the second parameter.

Example: Set a max length of 200 characters on blog post summary length for blog listings pages

{{ content.post_list_content|safe|truncatehtml(200) }}

upper(s)

Convert a value to uppercase.

Example: Capitalize all blog article titles on the listings page

{{ content.name|upper }}

urlencode(s)

Encodes the given string such that it's suitable for use as a query parameter in a url.

Example: encode a url parameter

href="http://foo.com/bar?my_val={{ content.title|urlencode }}