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

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

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.

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.

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:

Blog post markup

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

Optional author box

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

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

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.

Post Title

Generates an <h1> with your post title (content.name).

Author Information

Displays the author name (content.blog_post_author.display_name) with the posted on date (content.publish_date_localized). The series of if statements check for author information, as set in the Author's profile. If any of these statements fail (i.e. no Facebook profile has been set), the code will not render.

Social Share & Counters

Generates the default share buttons and counters.

Post Content

Renders blog post content (content.post_body)

Post Comments

Renders blog comment form and comments (blog_comments). Will be shown only if "Allow comments" is enabled in the blog's settings.

Post Topics

The if statement is checking if topics have been added to the post. If true, renders a list of the topics added to the post, linked to the respective topic listing page.

Post Title

Generates an <h2> with your post title (content.name) linking to your post (content.absolute_url).

Posted by Author

Displays the author name (content.blog_post_author.display_name) with the posted on date (content.publish_date_localized).

Featured Image

The if statement is checking for "Use featured image in listing summaries" being enabled in the blog's settings (content.post_list_summary_featured_image). If true, creates an <a> tag linking the featured image to the post (content.absolute_url). Creates an <img> tag with the post's featured image (content.post_list_summary_featured_image) and featured image's alt text (content.featured_image_alt_text).

Post Summary

Renders the post summary (content.post_list_content). Summary will be shown only if "Show summaries in listing pages" is enabled in the blog's settings. If featured images are enabled, images included in the summary will be not be displayed.

Social Share & Counters

Generates the default share buttons and counters.

"Read More" button

The if statement is checking for "Use featured image in listing summaries" being enabled in the blog's settings (content_group-show_summary_in_listing). If true, renders a "read more" anchor that links to the post (content.absolute_url).

Comments Counter

Renders the count of comments on the post.

Post Topics

The if statement is checking if topics have been added to the post. If true, renders a list of the topics added to the post, linked to the respective topic listing page.