HubL Reference

Table of contents
Close

HubL supported functions

Functions are similar to filters in that they accept parameters and generate a value; however, not all functions need to be applied to an initial template value. Instead they interact with other areas of your HubSpot environment.

blog_authors

The blog_authors function returns a sequence of blog author objects for the specified blog, sorted by slug ascending. This sequence can be stored in a variable and iterated through to create custom author post filters.

This function accepts two parameters. The first parameter specifies which blog to fetch authors from. The second parameter sets a limit on the number of authors fetched.

The first line of the example below demonstrates how the function returns a sequence of author objects. The rest of the example demonstrates a use case of saving a sequence into a variable and then iterating though the author objects, printing a set of author listing links. The example assumes that the blog has 4 authors.

This function has a limit of 250 authors.

{{ blog_authors('default', 250) }}

{% set my_topics = blog_authors('default', 250) %}
<ul>
{% for item in my_topics %}
<li><a href="{{ group.absolute_url }}/topic/{{item.slug}}">{{ item }}</a></li>
{% endfor %}
</ul>

[ Brian Halligan, Dharmesh Shah, Katie Burke, Kipp Bodnar]

<ul>
    <li><a href="http://blog.hubspot.com/marketing/author/brian-halligan">Brian Halligan</a></li></li>
    <li><a href="http://blog.hubspot.com/marketing/author/dharmesh-shah">Dharmesh Shah</a></li></li>
    <li><a href="http://blog.hubspot.com/marketing/author/katie-burke">Katie Burke</a></li></li>
    <li><a href="http://blog.hubspot.com/marketing/author/kipp-bodnar">Kipp Bodnar</a></li></li>
</ul>

blog_page_link

The blog_page_link function generates the URL of a paginated view of your blog listing. The function takes a numeric parameter, which allows you to generate links for current, next, previous, or a specific page. This function is generally used in the href attribute of pagination anchor tags and must be used on your blog listing template.  

The examples below show this function in use as an anchor href. The first example outputs the current page. The second example takes the number 7 parameter to specify the seventh page. The third example uses the next_page_num variable to generate a link that is relative to the current page number (you can also use the last_page_num variable for the previous page). The final example uses the current page_num variable and a + operator to create a link that is 4 greater than the current page.

 


<a href="{{ blog_page_link(current_page_num) }}">Current page</a>
<a href="{{ blog_page_link(7) }}">Page 7</a>
<a href="{{ blog_page_link(next_page_num) }}">Next</a>
<a href="{{ blog_page_link(current_page_num + 4) }}">Page Plus 4</a>


<a href="http://designers.hubspot.com/blog/page/1">Page 1</a>
<a href="http://designers.hubspot.com/blog/page/7">Page 7</a>
<a href="http://designers.hubspot.com/blog/page/2">Next</a>
<a href="http://designers.hubspot.com/blog/page/5">Page Plus 4</a>

blog_popular_posts

The blog_popular_posts function renders a set number of popular posts into a sequence. This sequence of posts can be saved into a variable and iterated through with a for loop, creating a custom post listing of your most popular posts. 

The function takes two parameters. The first parameter specifies which blog to collect popular posts from. The value should be 'default' or the blog ID of a particular blog (available in the URL of the Blog dashboard). The second parameter specifes how many posts to retrieve. 

The first line of the example below demonstrates how the function returns a sequence. The sequence is saved in a variable and looped through.  Any blog post variables should use the name of the individual loop item rather than "content." In the example,  "pop_post.name" is used. This technique can be used, not only on blog templates, but also regular pages.

This function has a limit of 200 posts.


{{ blog_popular_posts('default', 5) }}
{% set pop_posts = blog_popular_posts('default', 5) %}
{% for pop_post in pop_posts %}
    <div class="post-title">{{ pop_post.name }}</div>
{% endfor %}


[Popular post title 1, Popular post title 2, Popular post title 3, Popular post title 4, Popular post title 5]

<div class="post-title">Popular post title 1</div>
<div class="post-title">Popular post title 2</div>
<div class="post-title">Popular post title 3</div>
<div class="post-title">Popular post title 4</div>
<div class="post-title">Popular post title 5</div>

blog_recent_author_posts

The blog_recent_author_posts function returns a sequence of blog post objects for the specified author, sorted by most recent first. This sequence of posts can be saved into a variable and iterated through with a for loop, creating a custom post listing of posts by a particular author. 

The function takes three parameters. The first parameter specifies which blog to collect posts by an author from. The value should be 'default' or the blog ID of a particular blog (available in the URL of the Blog dashboard). The second parameter specifes which author to use. This parameter can use the content.blog_post_author.slug to use the author of the current post or accepts a lowercase hyphenated name such as 'brian-halligan'. The third parameter specifes how many posts to retrieve. 

The first line of the example below demonstrates how the function returns a sequence of posts by an author. In this example, rather than specifying an exact author name, the current post author is used. The sequence is saved in a variable and looped through. Any blog post variables should use the name of the individual loop item rather than "content." In the example,  "author_post.name" is used. This technique can be used, not only on blog templates, but also regular pages. 

This function has a limit of 200 posts.


{{ blog_recent_author_posts('default', content.blog_post_author.slug, 5 ) }}
{% set author_posts = blog_recent_author_posts('default', content.blog_post_author.slug, 5) %}
{% for author_post in author_posts %}
    <div class="post-title">{{ author_post.name }}</div>
{% endfor %}


[Post by author title 1, Post by author title 2, Post by author title 3, Post by author title 4, Post by author title 5]

<div class="post-title">Post by author title 1</div>
<div class="post-title">Post by author title 2</div>
<div class="post-title">Post by author title 3</div>
<div class="post-title">Post by author title 4</div>
<div class="post-title">Post by author title 5</div>

blog_recent_posts

The blog_recent_posts function returns a sequence of blog post objects for the specified blog, sorted by most recent first. This sequence of posts can be saved into a variable and iterated through with a for loop, creating a custom post listing of your most popular posts. 

The function takes two parameters. The first parameter specifies which blog to collect popular posts from. The value should be 'default' or the blog ID of a particular blog (available in the URL of the Blog dashboard). The second parameter specifes how many posts to retrieve. 

The first line of the example below demonstrates how the function returns a sequence. The sequence is saved in a variable and looped through. Any blog post variables should use the name of the individual loop item rather than "content." In the example,  "rec_post.name" is used. This technique can be used, not only on blog templates, but also regular pages. 

This function has a limit of 200 posts.


{{ blog_recent_posts('default', 5) }}
{% set rec_posts = blog_recent_posts('default', 5) %}
{% for rec_post in rec_posts %}
    <div class="post-title">{{ rec_post.name }}</div>
{% endfor %}


[Recent post title 1, Recent post title 2, Recent post title 3, Recent post title 4, Recent post title 5]

<div class="post-title">Recent post title 1</div>
<div class="post-title">Recent post title 2</div>
<div class="post-title">Recent post title 3</div>
<div class="post-title">Recent post title 4</div>
<div class="post-title">Recent post title 5</div>

blog_recent_topic_posts

The blog_recent_topic_posts function returns a sequence of blog post objects for the specified topic, sorted by most recent first. This sequence of posts can be saved into a variable and iterated through with a for loop, creating a custom post listing of posts by a particular topic. 

The function takes three parameters. The first parameter specifies which blog to collect posts by an author from. The value should be 'default' or the blog ID of a particular blog (available in the URL of the Blog dashboard). The second parameter specifes which topic to use. This parameter can use the topic.slug for a particualr topic from content.topic_list or accepts a lowercase hyphenated name such as 'marketing-tips'. The third parameter specifes how many posts to retrieve. 

The first line of the example below demonstrates how the function returns a sequence of posts by an topic. The sequence is saved in a variable and looped through. Any blog post variables should use the name of the individual loop item rather than "content." In the example,  "topic.name" is used. This technique can be used, not only on blog templates, but also regular pages. 

You can use this function as the foundation for a related posts section of a individual blog post layout. To learn more about creating a related posts section, check out this tutorial.

There is a limit of 100 most recent posts.


{{ blog_recent_topic_posts('default', 'marketing-tips', 5 ) }}
{% set topic_posts = blog_recent_topic_posts('default', 'marketing-tips', 5) %}
{% for topic_post in topic_posts %}
    <div class="post-title">{{ topic_post.name }}</div>
{% endfor %}


[Post about Marketing 1, Post about Marketing 2, Post about Marketing 3, Post about Marketing 4, Post about Marketing 5]

<div class="post-title">Post about Marketing 1</div>
<div class="post-title">Post about Marketing 2</div>
<div class="post-title">Post about Marketing 3</div>
<div class="post-title">Post about Marketing 4</div>
<div class="post-title">Post about Marketing 5</div>

blog_topics

The blog_topics function returns a sequence of blog topic objects for the specified blog, sorted by slug ascending. This sequence can be stored in a variable and iterated through to create custom topic post filters.

This function accepts two parameters. The first parameter specifies which blog to fetch topics from. The second parameter sets a limit on the number of topics fetched.

The first line of the example below demonstrates how the function returns a sequence of topic objects. The rest of the example demonstrates a use case of saving a sequence into a variable and then iterating though the topic objects, printing a set of author topics links. The example assumes that the blog has 4 topics. 

This function has a limit of 250 topics.

{{ blog_topics('default', 250) }}

{% set my_topics = blog_topics('default', 250) %}
<ul>
{% for item in my_topics %}
<li><a href="{{ group.absolute_url }}/topic/{{item.slug}}">{{ item }}</a></li>
{% endfor %}
</ul>

[ Blogging, Inbound Marketing, SEO, Social Media]

<ul>
    <li><a href="http://blog.hubspot.com/marketing/topic/blogging"></a></li></li>
    <li><a href="http://blog.hubspot.com/marketing/topic/inbound-marketing">Inbound Marketing</a></li></li>
    <li><a href="http://blog.hubspot.com/marketing/topic/seo">SEO</a></li>
    <li><a href="http://blog.hubspot.com/marketing/topic/social-media">Social Media</a></li></li>
</ul>

blog_total_post_count

This function returns the total number of published posts in the specified blog. If no parameter is specified, it will count your default blog posts. Alternatively, you can specify 'default' or a blog ID of a different blog to count. The blog ID is available in the URL of your blog dashboard for a particular blog.

{{ blog_total_post_count }} 


{{ blog_total_post_count(359485112) }}

16

54

color_variant

This function lightens or darkens a HEX value or color variable by a set amount. The first parameter is the hex color (for example ("#FFDDFF") or a variable storing a HEX value. The second parameter is the amount to adjust it by, from 0 to 255. This function can be used in CSS files to create a color variation. Another good use case is to use it with a color parameter of a color module, to allow users to specify a primary color that automatically generates a color variation.

In the example below, the HEX color #3A539B is stored in a variable called base_color. The color is than modified by -80 resulting in a darker blue (#00034b).

{% set base_color ="#3A539B" %} 


{{ color_variant(base_color, -80) }}
#00034b

cta

Because CTA modules have so many paramters that contain variations of their code, you can use the CTA function to easily generate a particular CTA in a template, page, or email. This function is what the rich text editor uses when you add a CTA via the editor.

The function accepts two parameters. The first parameter is the GUID of the CTA. This unique ID can be found in the URL of the Details screen of a particular CTA. The second parameter accepst the following enumeration values:

  • justifyleft - adds text-align: left to the CTA wrapper.
  • justifycenter- adds text-align: center to the CTA wrapper.
  • justifyright - adds text-align: right to the CTA wrapper.
  • justifyfull - adds no justification to the CTA wrapper.
{{ cta('ccd39b7c-ae18-4c4e-98ee-547069bfbc5b')  }} 


{{ cta('ccd39b7c-ae18-4c4e-98ee-547069bfbc5b', 'justifycenter') }}

<span class="hs-cta-wrapper" id="hs-cta-wrapper-ccd39b7c-ae18-4c4e-98ee-547069bfbc5b"> <span class="hs-cta-node hs-cta-ccd39b7c-ae18-4c4e-98ee-547069bfbc5b" id="hs-cta-ccd39b7c-ae18-4c4e-98ee-547069bfbc5b" style="visibility: visible;"><a id="cta_button_158015_19a9097a-8dff-4181-b8f7-955a47f29826" class="cta_button " href="//cta-service-cms2.hubspot.com/ctas/v2/public/cs/c/?cta_guid=19a9097a-8dff-4181-b8f7-955a47f29826&placement_guid=ccd39b7c-ae18-4c4e-98ee-547069bfbc5b&portal_id=158015&redirect_url=APefjpH34lXcq1H4FhyHhE3DNeHPNigbBluiv6t07-N80GLkyj2Dn9PizhW8bo4ecrS47RmyslLg7QQKWLG7n2oNkvrumL9dWUjMMEjVYvStZ-IMyulMBvdU8AddI6nFXL0G_VPP_VXmnFi66RKPPjPvx6kbyPO6k566noP4CTZMyADHkGsGBf4S95YdTNtTTFabShT62cVAiV_oWlXbpfPWQc4G3IvkoDoAhmpQVW-ggUcKa4Ft_5A&hsutk=683eeb5b499fdfdf469646f0014603b4&utm_referrer=http%3A%2F%2Fwww.davidjosephhunt.com%2F%3Fhs_preview%3DNVkCLfFf-2857453560&canon=http%3A%2F%2Fwww.davidjosephhunt.com%2F-temporary-slug-63bb220d-eda6-44d0-9738-af928e787237" style="" cta_dest_link="http://www.hubspot.com/free-trial" title="Start a HubSpot trial"> Start a HubSpot trial </a> </span> <script charset="utf-8" src="//js.hscta.net/cta/current.js"></script> <script type="text/javascript">         hbspt.cta.load(158015, 'ccd39b7c-ae18-4c4e-98ee-547069bfbc5b');     </script> </span>

<span class="hs-cta-wrapper" id="hs-cta-wrapper-ccd39b7c-ae18-4c4e-98ee-547069bfbc5b"> <span class="hs-cta-node hs-cta-ccd39b7c-ae18-4c4e-98ee-547069bfbc5b" id="hs-cta-ccd39b7c-ae18-4c4e-98ee-547069bfbc5b" style="display: block; text-align: center; visibility: visible;"><a id="cta_button_158015_19a9097a-8dff-4181-b8f7-955a47f29826" class="cta_button " href="//cta-service-cms2.hubspot.com/ctas/v2/public/cs/c/?cta_guid=19a9097a-8dff-4181-b8f7-955a47f29826&placement_guid=ccd39b7c-ae18-4c4e-98ee-547069bfbc5b&portal_id=158015&redirect_url=APefjpH34lXcq1H4FhyHhE3DNeHPNigbBluiv6t07-N80GLkyj2Dn9PizhW8bo4ecrS47RmyslLg7QQKWLG7n2oNkvrumL9dWUjMMEjVYvStZ-IMyulMBvdU8AddI6nFXL0G_VPP_VXmnFi66RKPPjPvx6kbyPO6k566noP4CTZMyADHkGsGBf4S95YdTNtTTFabShT62cVAiV_oWlXbpfPWQc4G3IvkoDoAhmpQVW-ggUcKa4Ft_5A&hsutk=683eeb5b499fdfdf469646f0014603b4&utm_referrer=http%3A%2F%2Fwww.davidjosephhunt.com%2F%3Fhs_preview%3DNVkCLfFf-2857453560&canon=http%3A%2F%2Fwww.davidjosephhunt.com%2F-temporary-slug-63bb220d-eda6-44d0-9738-af928e787237" style="" cta_dest_link="http://www.hubspot.com/free-trial" title="Start a HubSpot trial"> Start a HubSpot trial </a> </span> <script charset="utf-8" src="//js.hscta.net/cta/current.js"></script> <script type="text/javascript">         hbspt.cta.load(158015, 'ccd39b7c-ae18-4c4e-98ee-547069bfbc5b');     </script> </span>

datetimeformat

The datetimeformat function works just like the datetimeformat filter, but uses function syntax instead of filter syntax. It uses the same parameters to format the date. You can see a complete list of formating paramters, here

{{ datetimeformat(content.publish_date_local_time, '%B %e, %Y') }} 

May 13, 2015

get_public_template_url

This function returns public URL of a specified template or code file. The parameter of this function is the path in Design Manager. Coded file URLs update each time you publish them; therefore, by using this function your ensure you are always using the latest version of the file. 

You can automatically generate this function in the app, by choosing Actions > Get Public URL. The example below gets the URL of a Javascript file authored in Design Manager that can be included as the src of a <script>.

HubSpot Help article screenshot
{{ get_public_template_url("custom/page/Designers_2015/designer-doc-2105.js") }} 

//cdn2.hubspot.net/hub/327485/hub_generated/style_manager/1431479563436/custom/page/Designers_2015/designer-doc-2105.min.html

get_public_template_url_by_id

This function works just like get_public_template_url,  returning public URL of a specified template or code file. The only different is the parameter of this function is the template ID (available in the URL of the template or coded file), instead of the Design Manager path. 

{{ get_public_template_url_by_id('2778457004')  }} 

//cdn2.hubspot.net/hub/327485/hub_generated/style_manager/1431479563436/custom/page/Designers_2015/designer-doc-2105.min.js

require_css()

This function enqueues a css file to be rendered in the <head />. All CSS <link /> tags are grouped together and render before any javascript tags. The Hubl is replaced with an empty line and then a <link /> is added to {{ standard_header_includes }}.


{{ standard_header_includes }}
<!-- more html -->
{{ require_css("http://example.com/path/to/file.css") }}


<!-- other standard header html -->
<link type="text/css" rel="stylesheet" href="http://example.com/path/to/file.css">
<!-- more html -->

include_css

This function is being depercated. Please use require_css()

This function uses the Design Manager path of a CSS file to generate a link tag that references that file. The parameter is the path to the stylesheet.
{{ include_css('custom/page/Designers_2015/designers-doc-2015.css') }} 

 <link rel="stylesheet" href="//cdn2.hubspot.net/hub/327485/hub_generated/style_manager/1431477077901/custom/page/Designers_2015/designers-doc-2015.min.css">

include_default_custom_css

This function generates a link tag that references the Primary CSS file (default_custom_style.min.css). This file is deisgned to be a global CSS file that can be added to all your templates. In order to render, the function requires a boolean parameter value of True.

require_js()

This function enqueues a script to be rendered in either the <head /> or footer. The HubL is replaced by an empty line and included in either {{ standard_footer_includes }} (the default) or {{ standard_header_includes }} if the call contains the 'head' parameter.


{{ standard_header_includes }}
<!-- more html -->
{{ require_js("http://example.com/path/to/footer-file.js", "footer") }}
{{ require_js("http://example.com/path/to/head-file.js", "head") }}

{{ standard_footer_includes }}


<!-- other standard header html -->
<script src="http://example.com/path/to/head-file.js"></script>

<!-- more html -->

<script src="http://example.com/path/to/footer-file.js"></script>
<!-- other standard footer html -->

include_javascript

This function is being depercated. Please use require_js()

This function uses the Design Manager path of a Javacript file to generate a script tag that references that file. The parameter is the path to the Javascript file.

{{ include_javascript('custom/page/Designers_2015/designer-doc-2105.js') }} 

<script type="text/javascript" src="//cdn2.hubspot.net/hub/327485/hub_generated/style_manager/1431479563436/custom/page/Designers_2015/designer-doc-2105.min.js"></script>

range

Return a list containing an arithmetic progression of integers. With one parameter, range will return a list from 0 up to (but not including) the value. With two parameters, the range will start at the first value and increment by 1 up to (but not including) the second value. The third parameter specifies the step increment. All values can be negative. Impossible ranges will return an empty list. Ranges can generate a maximum of 1000 values.

Range can be used within a for loop to specify the number of iterations that should run.


{{ range(11) }}
{{ range(5, 11) }}
{{ range(0, 11, 2) }}
       
       
{% for number in range(11) %}
{{ number }}
{% endfor %}


[0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
[5, 6, 7, 8, 9, 10]
[2, 4, 6, 8, 10]

12345678910

super

Super prints content from the parent template into a child template, when you have created parent and children templates, using the extends tag. For example in the code below, a basic HTML template has been created with a HubL block named "sidebar" and saved as parent.html. A second template file is created that will extend that parent file. Normally the <h3> would be printed in the parent HTML's sidebar block. But by using super, content from the parent template sidebar block is combined with the content from the child template. 


{% extends "custom/page/web_page_basic/parent.html" %}

{% block sidebar %}
    <h3>Table Of Contents</h3>
    {{ super() }}
{% endblock %}


<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>This is the parent template </title>
    </head>
    <body>
             <h3>Table of contents</h3>
            Sidebar content from parent.
    </body>
</html>

to_local_time

Converts a UNIX timestamp to the local time, based on your HubSpot Report Settings. You can then apply a datetimeformat filter to format the date.

{{ to_local_time(eastern_dt) }} 

2015-05-13 10:37:31

 

truncate

The truncate function works just like the truncate filter, but uses function syntax instead of filter syntax. The first parameter specifies the string. The second parameter specifes the length at which to truncate. The final parameter specifies the characters to add when the trucation occurs.

{{ truncate('string to truncate at a certain length', 19, end='...') }} 

string to truncate ...

unixtimestamp

This function returns a unix timestamp. By default it will return the timestamp of now or you can optionally supply a datetime object to be converted to a unix timestamp.


{{ unixtimestamp() }}
{{ unixtimestamp(d) }}


1490441693000
1431475014000