Set featured posts on the HubSpot blog listings page

Difficulty Level: Advanced. This post assumes a strong understanding of HubSpot tools and technical knowledge. Insutructions are given as guidelines and may require additional customisation.

Setting one or more featured posts on your blog listings page draws your reader’s attention to posts that you want to highlight.

On HubSpot, you can achieve this using post topics or tags and HubL. Your blog listings template will include a HubL expression that says “If the blog post has the featured tag, make it a featured post”.

You will need to get your hands dirty with some code to do this so, if you’re uncertain, check in with your developer or enlist the help of a HubSpot Freelance Developer.

The basic code to separate out featured posts is simple and can be done from the listing template (click on the “Blog Content” module and click into “Edit Listing Template”).

Setting a featured post on your HubSpot blog listings template

{% raw %}{# First loop: featured posts #}
{% for content in contents %}
  {% for topic in content.topic_list %}
    {% if topic.name == 'featured' %}
      {# Add your featured post markup here #}
    {% endif %}
  {% endfor %}
{% endfor %}

{# Second loop: all other posts #}
{% for content in contents %}
  {# Add the markup for the rest of your posts here #}
{% endfor %}

The code loops through through the posts twice:

• The first loop iterates through all posts (“for content in contents”), loops through every topic in each post (“for topic in content.topic_list”) and then uses a conditional to check if that post has a “featured” topic. Any markup you put within that conditional will apply to featured posts.

• T

  he second loop iterates through all posts (“for content in contents”) and any markup within this loop will apply to all posts.

As for your markup, you can find more detailed information on HubSpot’s blog content markup here. 

You might have noticed a few details here: 

1. The first loop should output all posts tagged “featured” which might not necessarily work with your styling
2. The “featured” posts will appear duplicate below

Below are more details on how to avoid this.

Excluding featured posts

If you don’t want the featured posts to appear again below, you can add the opposite condition to the second loop, to make sure the posts don’t have a “featured” tag:

{# First loop: featured posts #}
  {% for content in contents %}
    {% for topic in content.topic_list %}
      {% if topic.name == 'featured' %}
        {# Add your featured post markup here #}
      {% endif %}
    {% endfor %}
{% endfor %}

{# Second loop: all other posts #}
{% for content in contents %}
  {% for topic in content.topic_list %}
    {% if topic.name != 'featured' %}
      {# Add the markup for the rest of your posts here #}
    {% endif %}
  {% endfor %}
{% endfor %}

Limiting the number of featured posts

If your design only allows for a certain number of featured posts, you may want to limit how many appear in the “Featured” section. To do so, you can create a function that limits the number.

{# First loop: featured posts #}
{% set featured_posts = blog_recent_topic_posts('default', 'featured', 1) %}
{% for post in featured_posts %}
  {% for topic in post.topic_list %}
    {% if topic.name == 'featured' %}
      {# Add your featured post markup here #}
    {% endif %}
  {% endfor %}
{% endfor %}

{# Second loop: all other posts #}
{% for content in contents %}
  {# Add the markup for the rest of your posts here #}
{% endfor %}

The first line contains a function that sets “featured_posts” to those from the “default” blog with the “featured” tag and limits it to 1. You can find more details on this here.

Note that I’ve updated “content in content” to “post in featured_posts” and changed “content” to “post” below as well.

Excluding the “featured” topic from your post

Perhaps you don’t want users to see the “Featured” tag on your post. If that’s the case, you can exclude a blog topic from a topics list using another conditional and CSS. This will look something like this:

{% if post.topic_list %}
  {% for topic in post.topic_list %}
    {% if topic.name != 'featured' %}
      <a class="topic-link" href="{{ blog_tag_url(group.id, topic.slug) }}">{{ topic.name }}</a>
    {% endif %}
  {% endfor %}
{% endif %}

This code checks that a post has a topic list (if post.topic_list), loops through it (for topic in post.topic_list) and checks to make sure that it’s not featured (if topic.name != 'featured'). If it’s not, it prints out the topic name below linking it to that topic’s URL.

Putting it all together

The markup you use will very much depend on what you’re trying to achieve so there’s really no size fits all. However, you can find HubSpot’s basic blog content markup here and combine it with the above.

If you get stuck, feel free to give me a shout. There’s also a great community at community.hubspot.com and someone will typically be happy to answer any questions you might have.