HubL Reference

Table of contents
Close

Blog content markup

Unlike other modules, the blog content module is not made up of a single tag, but rather a combination of conditional logic and for loops. If statements are used to customize your markup based on whether you are looking a a single post or listing layout. For loops are used to iterate through your content and list different selections of posts. 

The following article will explain the standard markup of a HubSpot blog content module, as well as describe a few simple customizations. You can see the complete markup of a standard HubSpot blog content module at the bottom of this page.

If is_listing_view statement

Standard HubSpot blog content areas are created with a master if statement that evaluates whether the user is looking at a listing or a individual post. If you are using a drag and drop template builder template, this if statement is built into the UI of blog content module buttons.
Blog content module

If you are coding an HTML blog template and are using a single template for both your post and listing layouts, then you need to define this if statement. Within the if statement, you will write both your post and listing code.


{% if is_listing_view %}
Markup for blog listing template
{% else %}
Markup for blog post template
{% endif %}

If blog_author statement

Within the standard HubSpot blog listing markup, there is an if blog_author statement. This statement evaluates to true when you are looking at an author listing page. An author listing page is a page of posts by a single author. The standard HubSpot template includes the author's name, bio, and social media accounts.

                {% if blog_author %}
                        <div class="hs-author-profile">
                            <h2 class="hs-author-name">{{ blog_author.display_name }}</h2>
                            {% if blog_author.avatar %} <div class="hs-author-avatar"> <img src="{{ blog_author.avatar }}"> </div> {% endif %}
                            <div class="hs-author-bio">{{ blog_author.bio }}</div>
                            {% if blog_author.has_social_profiles %}
                                <div class="hs-author-social-section">
                                    <span class="hs-author-social-label">Find me on:</span>
                                    <div class="hs-author-social-links">
                                        {% if blog_author.facebook %}
                                            <a href="{{ blog_author.facebook }}" target="_blank" class="hs-author-social-link hs-social-facebook"> </a>
                                        {% endif %}
                                        {% if blog_author.linkedin %}
                                            <a href="{{ blog_author.linkedin }}" target="_blank" class="hs-author-social-link hs-social-linkedin"> </a>
                                        {% endif %}
                                        {% if blog_author.twitter %}
                                            <a href="{{ blog_author.twitter }}" target="_blank" class="hs-author-social-link hs-social-twitter"> </a>
                                        {% endif %}
                                        {% if blog_author.google_plus %}
                                            <a href="{{ blog_author.google_plus }}?rel=author" target="_blank" class="hs-author-social-link hs-social-google-plus"> </a>
                                        {% endif %}
                                    </div>
                                </div>
                            {% endif %}
                        </div>
                        <h3 class="hs-author-listing-header">Recent Posts</h3>
                    {% endif %}

Blog listing for loop

The listing of posts is generated by a for loop that iterates through your blog posts and lists the posts based on the user's request. The for loop iterates through "content in contents". Contents is a predefined sequence of content that contains all the posts contained in that blog. 


{% for content in contents %}
    <div class="post-item">
        Post item markup that renders with each iteration.              
    </div>
{% endfor %}        

If not simple_list_page statement

Within the for loop, there is an if statement that determines what to render in a simple versus regular listing. A simple listing is a listing of all your posts. The simple listing is not affected by the post limit in Content Settings and generally just contains links to all the blog posts. The regular listing iterates through the number of posts specified in content settings and paginates accordingly.

The following code is a simplified version of this if statement that defines what should be iterated in a simple listing page. Notice the if statement uses reverse logic; therefore, the else defines the simple listing view.


{% if not simple_list_page %}
    Iterated post markup for regular listing                            
{% else %}
    <h2 class="post-listing-simple"><a href="{{content.absolute_url}}">{{ content.name }}</a></h2>
{% endif %}          

Listing post markup

Within the if statement logic for the regular listing, the markup for the iterated post is defined. This block of code dictates what each post should look like in a listing view. 

The standard HubSpot blog listing markup includes the following:

  • The title linked to the post in an h2 tag
  • The blog author name linked to a listing of the blog author's posts
  • Blog social sharing counters, if enabled in Content Setting
  • The post featured image and its alt text if added and enabled in Content Settings
  • The post content
  • The read more link if summaries are enabled in Content Settings
  • The number of comments linked to the comments section of that post
  • The post's topics

<div class="post-header">
    <h2><a href="{{content.absolute_url}}">{{ content.name }}</a></h2>
        <div id="hubspot-author_data" class="hubspot-editable" data-hubspot-form-id="author_data" data-hubspot-name="Blog Author">
            Posted by
                {%if content.blog_post_author %}
                    <a class="author-link" href="{{ group.absolute_url }}/author/{{ content.blog_post_author.slug }}">{{ content.blog_post_author.display_name }}</a> on {{ content.publish_date_localized }}
                {% endif %}
        </div>
        {% blog_social_sharing "blog_social_sharing" overrideable=False, label='Blog Social Sharing' %}
</div>
<div class="post-body clearfix">
                                    <!--post summary-->
    {% if content.post_list_summary_featured_image %}
        <div class="hs-featured-image-wrapper">
        <a href="{{content.absolute_url}}" title="" class="hs-featured-image-link">
        <img src="{{ content.post_list_summary_featured_image }}" alt="{{ content.featured_image_alt_text }}" class="hs-featured-image">
        </a>
        </div>
    {% endif %}
    {{ content.post_list_content|safe }}
</div>
{% if content_group.show_summary_in_listing %}
    <a class="more-link" href="{{ content.absolute_url }}">Read More</a>
{% endif %}
<div class="custom_listing_comments">
    {% set comments_number =  content.comment_list|length %}
    {% set comments_label = "Comment" if comments_number == 1 else "Comments" %}
    {{ comments_number }} {{ comments_label }} <a href="{{content.absolute_url}}#comments-listing">Click here to read/write comments</a>
</div>
{% if content.topic_list %}
    <p id="hubspot-topic_data"> Topics:
        {% for topic in content.topic_list %}
            <a class="topic-link" href="{{ group.absolute_url }}/topic/{{ topic.slug }}">{{ topic.name }}</a>{% if not loop.last %},{% endif %}
        {% endfor %}
    </p>
{% endif %}                       

Listing pagination

HubSpot's blog listing markup includes next, previous, and all posts pagination. This pagination only renders on the non-simple listing view.

{% if not simple_list_page %}
                <div class="blog-pagination">
                    {% if last_page_num %}
                        <a class="previous-posts-link" href="{{ blog_page_link(last_page_num) }}">Previous</a>
                    {% endif %}
                        <a class="all-posts-link" href="{{ group.absolute_url }}/all">All posts</a>
                    {% if next_page_num %}
                        <a class="next-posts-link" href="{{ blog_page_link(next_page_num) }}">Next</a>
                    {% endif %}
                </div>
{% endif %}

Blog post markup

The individual blog post markup is defined following the else statement of the initial is_listing_view if statement or directly with the Edit post layout section of the drag and drop blog content module. The standard individual post markup includes the following:

  • An h1 tag for the post title
  • The author's name linked to a listing of his or her posts
  • The author's social media accounts, if added to his or her profile
  • Blog social sharing counters, if enabled in Content Settings
  • The post body
  • The post's topics

<div class="blog-section">
    <div class="blog-post-wrapper cell-wrapper">
                <div class="blog-section">
            <div class="blog-post-wrapper cell-wrapper">
                <div class="section post-header">
                    <h1>{{ content.name }}</h1>
                    <div id="hubspot-author_data" class="hubspot-editable" data-hubspot-form-id="author_data" data-hubspot-name="Blog Author" >
                        <span class="hs-author-label">Posted by</span>
                        {% if content.blog_post_author %}
                            <a class="author-link" href="{{ group.absolute_url }}/author/{{ content.blog_post_author.slug }}">{{ content.blog_post_author.display_name }}</a> on {{ content.publish_date_localized }}
                            {% if content.blog_post_author.avatar %} <div class="hs-author-avatar"> <img src="{{ content.blog_post_author.avatar }}"> </div> {% endif %}
                            {% if content.blog_post_author.has_social_profiles %}
                                <div class="hs-author-social-section">
                                    <span class="hs-author-social-label">Find me on:</span>
                                    <div class="hs-author-social-links">
                                        {% if content.blog_post_author.facebook %}
                                            <a href="{{ content.blog_post_author.facebook }}" target="_blank" class="hs-author-social-link hs-social-facebook">Facebook </a>
                                        {% endif %}
                                        {% if content.blog_post_author.linkedin %}
                                            <a href="{{ content.blog_post_author.linkedin }}" target="_blank" class="hs-author-social-link hs-social-linkedin">LinkedIn</a>
                                        {% endif %}
                                        {% if content.blog_post_author.twitter %}
                                            <a href="{{ content.blog_post_author.twitter }}" target="_blank" class="hs-author-social-link hs-social-twitter">Twitter </a>
                                        {% endif %}
                                        {% if content.blog_post_author.google_plus %}
                                            <a href="{{ content.blog_post_author.google_plus }}?rel=author" target="_blank" class="hs-author-social-link hs-social-google-plus">Google+</a>
                                        {% endif %}
                                    </div>
                                </div>
                            {% endif %}
                        {% endif %}
                    </div>
                </div>
                {% blog_social_sharing "blog_social_sharing" overrideable=False, label='Blog Social Sharing' %}
                <div class="section post-body">
                    {{ content.post_body }}
                </div>
                {% if content.topic_list %}
                     <p id="hubspot-topic_data" > Topics:
                        {% for topic in content.topic_list %}
                            <a class="topic-link" href="{{ group.absolute_url }}/topic/{{ topic.slug }}">{{ topic.name }}</a>{% if not loop.last %},{% endif %}
                        {% endfor %}
                     </p>
                {% endif %}
                 <div class="section blog-comments">
                    {% blog_comments "blog_comments" overrideable=False, label='Blog Comments' %}
                </div>
            </div>
        </div>
    </div>
</div>       

Optional author box

At the bottom of the individual post layout there is a author box that is commented out by default. This box includes bio and social information about the author with his or her avatar. To make this section render, remove the {# delimeters from the start and end of the code block.


        <!-- Optional: Blog Author Bio Box -->
        {#<div class="about-author-sec row-fluid">
            <div class="span2">
                <img alt="{{ content.blog_post_author.display_name }}" src="{{ content.blog_post_author.avatar }}"> 
            </div>
            <div class="span10">
                <h3>Written by <a class="author-link" href="{{ group.absolute_url }}/author/{{ content.blog_post_author.slug }}">{{ content.blog_post_author.display_name }}</a></h3>         
                <p>{{ content.blog_post_author.bio }}</p>
                {% if content.blog_post_author.has_social_profiles %}
                    <div class="hs-author-social-section">
                        <div class="hs-author-social-links">
                            {% if content.blog_post_author.facebook %}
                                <a href="{{ content.blog_post_author.facebook }}" target="_blank" class="hs-author-social-link hs-social-facebook">Facebook</a>
                            {% endif %}
                            {% if content.blog_post_author.linkedin %}
                                <a href="{{ content.blog_post_author.linkedin }}" target="_blank" class="hs-author-social-link hs-social-linkedin">LinkedIn</a>
                            {% endif %}
                            {% if content.blog_post_author.twitter %}
                                <a href="{{ content.blog_post_author.twitter }}" target="_blank" class="hs-author-social-link hs-social-twitter">Twitter</a>
                            {% endif %}
                            {% if content.blog_post_author.google_plus %}
                                <a href="{{ content.blog_post_author.google_plus }}?rel=author" target="_blank" class="hs-author-social-link hs-social-google-plus">Google+</a>
                            {% endif %}
                        </div>
                    </div>
                {% endif %}
            </div>
        </div>#}

If topic statement

In addition to the if blog_author statement that defines markup that should only render on author listing pages, there is a topic variable that can be uses to only render code on a blog topic listing. This if statement is not included in the default blog code. The example below is a snippet that uses the page title variable to automatically print the topic name at the top of a topic listing page. This snippet could be added to your blog listing code.


{% if topic %}<h3>Posts about {{ page_meta.html_title|replace(' | ', '') }}</h3>{% endif %}

Example blog markup

The following markup is the standard blog content module code used by HubSpot. It can be used for a reference, when coding blog templates from scratch, and is automatically included in any blog content module in Template Builder.


{% if is_listing_view %}<div class="blog-section">
    <div class="blog-listing-wrapper cell-wrapper">
                <div class="blog-section">
            <div class="blog-listing-wrapper cell-wrapper">
        {# simple_list_page indicates the "blog/all" page, which is a list of links to every blog post #}
                <div class="post-listing{% if simple_list_page %}-simple{% endif %}">
                    {% if blog_author %}
                        <div class="hs-author-profile">
                            <h2 class="hs-author-name">{{ blog_author.display_name }}</h2>
                            {% if blog_author.avatar %} <div class="hs-author-avatar"> <img src="{{ blog_author.avatar }}"> </div> {% endif %}
                            <div class="hs-author-bio">{{ blog_author.bio }}</div>
                            {% if blog_author.has_social_profiles %}
                                <div class="hs-author-social-section">
                                    <span class="hs-author-social-label">Find me on:</span>
                                    <div class="hs-author-social-links">
                                        {% if blog_author.facebook %}
                                            <a href="{{ blog_author.facebook }}" target="_blank" class="hs-author-social-link hs-social-facebook"> </a>
                                        {% endif %}
                                        {% if blog_author.linkedin %}
                                            <a href="{{ blog_author.linkedin }}" target="_blank" class="hs-author-social-link hs-social-linkedin"> </a>
                                        {% endif %}
                                        {% if blog_author.twitter %}
                                            <a href="{{ blog_author.twitter }}" target="_blank" class="hs-author-social-link hs-social-twitter"> </a>
                                        {% endif %}
                                        {% if blog_author.google_plus %}
                                            <a href="{{ blog_author.google_plus }}?rel=author" target="_blank" class="hs-author-social-link hs-social-google-plus"> </a>
                                        {% endif %}
                                    </div>
                                </div>
                            {% endif %}
                        </div>
                        <h3 class="hs-author-listing-header">Recent Posts</h3>
                    {% endif %}
                    {% for content in contents %}
                        <div class="post-item">
                            {% if not simple_list_page %}
                                <div class="post-header">
                                    <h2><a href="{{content.absolute_url}}">{{ content.name }}</a></h2>
                                    <div id="hubspot-author_data" class="hubspot-editable" data-hubspot-form-id="author_data" data-hubspot-name="Blog Author">
                                        Posted by
                                        {%if content.blog_post_author %}
                                            <a class="author-link" href="{{ group.absolute_url }}/author/{{ content.blog_post_author.slug }}">{{ content.blog_post_author.display_name }}</a> on {{ content.publish_date_localized }}
                                        {% endif %}
                                    </div>
                                    {% blog_social_sharing "blog_social_sharing" overrideable=False, label='Blog Social Sharing' %}
                                </div>
                                <div class="post-body clearfix">
                                    <!--post summary-->
                                    {% if content.post_list_summary_featured_image %}
                                        <div class="hs-featured-image-wrapper">
                                            <a href="{{content.absolute_url}}" title="" class="hs-featured-image-link">
                                                <img src="{{ content.post_list_summary_featured_image }}" alt="{{ content.featured_image_alt_text }}" class="hs-featured-image">
                                            </a>
                                        </div>
                                    {% endif %}
                                    {{ content.post_list_content|safe }}
                                </div>
                                {% if content_group.show_summary_in_listing %}
                                    <a class="more-link" href="{{ content.absolute_url }}">Read More</a>
                                {% endif %}
                                <div class="custom_listing_comments">
                                    {% set comments_number =  content.comment_list|length %}
                                    {% set comments_label = "Comment" if comments_number == 1 else "Comments" %}
                                    {{ comments_number }} {{ comments_label }} <a href="{{content.absolute_url}}#comments-listing">Click here to read/write comments</a>
                                </div>
                                {% if content.topic_list %}
                                     <p id="hubspot-topic_data"> Topics:
                                        {% for topic in content.topic_list %}
                                            <a class="topic-link" href="{{ group.absolute_url }}/topic/{{ topic.slug }}">{{ topic.name }}</a>{% if not loop.last %},{% endif %}
                                        {% endfor %}
                                     </p>
                                {% endif %}
                            {% else %}
                                <h2 class="post-listing-simple"><a href="{{content.absolute_url}}">{{ content.name }}</a></h2>
                            {% endif %}
                        </div>
                    {% endfor %}
                </div>

                {% if not simple_list_page %}
                <div class="blog-pagination">
                    {% if last_page_num %}
                        <a class="previous-posts-link" href="{{ blog_page_link(last_page_num) }}">Previous</a>
                    {% endif %}
                        <a class="all-posts-link" href="{{ group.absolute_url }}/all">All posts</a>
                    {% if next_page_num %}
                        <a class="next-posts-link" href="{{ blog_page_link(next_page_num) }}">Next</a>
                    {% endif %}
                </div>
                {% endif %}
            </div>
        </div>

    </div>
</div>{% else %}<div class="blog-section">
    <div class="blog-post-wrapper cell-wrapper">
                <div class="blog-section">
            <div class="blog-post-wrapper cell-wrapper">
                <div class="section post-header">
                    <h1>{{ content.name }}</h1>
                    <div id="hubspot-author_data" class="hubspot-editable" data-hubspot-form-id="author_data" data-hubspot-name="Blog Author" >
                        <span class="hs-author-label">Posted by</span>
                        {% if content.blog_post_author %}
                            <a class="author-link" href="{{ group.absolute_url }}/author/{{ content.blog_post_author.slug }}">{{ content.blog_post_author.display_name }}</a> on {{ content.publish_date_localized }}
                            {% if content.blog_post_author.avatar %} <div class="hs-author-avatar"> <img src="{{ content.blog_post_author.avatar }}"> </div> {% endif %}
                            {% if content.blog_post_author.has_social_profiles %}
                                <div class="hs-author-social-section">
                                    <span class="hs-author-social-label">Find me on:</span>
                                    <div class="hs-author-social-links">
                                        {% if content.blog_post_author.facebook %}
                                            <a href="{{ content.blog_post_author.facebook }}" target="_blank" class="hs-author-social-link hs-social-facebook">Facebook </a>
                                        {% endif %}
                                        {% if content.blog_post_author.linkedin %}
                                            <a href="{{ content.blog_post_author.linkedin }}" target="_blank" class="hs-author-social-link hs-social-linkedin">LinkedIn</a>
                                        {% endif %}
                                        {% if content.blog_post_author.twitter %}
                                            <a href="{{ content.blog_post_author.twitter }}" target="_blank" class="hs-author-social-link hs-social-twitter">Twitter </a>
                                        {% endif %}
                                        {% if content.blog_post_author.google_plus %}
                                            <a href="{{ content.blog_post_author.google_plus }}?rel=author" target="_blank" class="hs-author-social-link hs-social-google-plus">Google+</a>
                                        {% endif %}
                                    </div>
                                </div>
                            {% endif %}
                        {% endif %}
                    </div>
                </div>
                {% blog_social_sharing "blog_social_sharing" overrideable=False, label='Blog Social Sharing' %}
                <div class="section post-body">
                    {{ content.post_body }}
                </div>
                {% if content.topic_list %}
                     <p id="hubspot-topic_data" > Topics:
                        {% for topic in content.topic_list %}
                            <a class="topic-link" href="{{ group.absolute_url }}/topic/{{ topic.slug }}">{{ topic.name }}</a>{% if not loop.last %},{% endif %}
                        {% endfor %}
                     </p>
                {% endif %}
                <div class="section blog-comments">
                    {% blog_comments "blog_comments" overrideable=False, label='Blog Comments' %}
                </div>
            </div>
        </div>


        <!-- Optional: Blog Author Bio Box -->
        {#<div class="about-author-sec row-fluid">
            <div class="span2">
                <img alt="{{ content.blog_post_author.display_name }}" src="{{ content.blog_post_author.avatar }}"> 
            </div>
            <div class="span10">
                <h3>Written by <a class="author-link" href="{{ group.absolute_url }}/author/{{ content.blog_post_author.slug }}">{{ content.blog_post_author.display_name }}</a></h3>         
                <p>{{ content.blog_post_author.bio }}</p>
                {% if content.blog_post_author.has_social_profiles %}
                    <div class="hs-author-social-section">
                        <div class="hs-author-social-links">
                            {% if content.blog_post_author.facebook %}
                                <a href="{{ content.blog_post_author.facebook }}" target="_blank" class="hs-author-social-link hs-social-facebook">Facebook</a>
                            {% endif %}
                            {% if content.blog_post_author.linkedin %}
                                <a href="{{ content.blog_post_author.linkedin }}" target="_blank" class="hs-author-social-link hs-social-linkedin">LinkedIn</a>
                            {% endif %}
                            {% if content.blog_post_author.twitter %}
                                <a href="{{ content.blog_post_author.twitter }}" target="_blank" class="hs-author-social-link hs-social-twitter">Twitter</a>
                            {% endif %}
                            {% if content.blog_post_author.google_plus %}
                                <a href="{{ content.blog_post_author.google_plus }}?rel=author" target="_blank" class="hs-author-social-link hs-social-google-plus">Google+</a>
                            {% endif %}
                        </div>
                    </div>
                {% endif %}
            </div>
        </div>#}

    </div>
</div>{% endif %}