Displaying Featured Posts First in A Hubspot Recent Posts Tag

Are you looking to showcase a featured blog post prominently in a Hubspot Recent Posts function? It's a great way to draw attention to important content and engage your readers. In this blog post, we will provide a step-by-step guide. By following these instructions, you'll be able to display your featured blog post first, followed by the rest of your recent posts as normal. Let's dive in!

Here we'll assume that we want to show 6 posts and we want the first one to be the featured one. So we need to search through the most recent posts to avoid duplication.

Step 1: Find Recent Posts tagged "Featured" and find the five posts that would otherwise be displayed as most recent

To begin, you'll need to set up two variables:featured_posts and normal_recent_posts

The featured_post variable retrieves the post tagged as "Featured," and the normal_recent_posts variable retrieves the remaining posts for the listing.

{% set featured_posts = blog_recent_tag_posts("default", "featured", 1) %} {# featured is lowercase here as it's the slug #} {# also note we're using blog_recent_tag_posts to get the posts not blog_tags #}

{% set normal_recent_posts = blog_recent_posts('default', 5) %}

Step 2: Identify the Featured Post ID

In this step, we'll extract the ID of the featured post from the featured_posts  variable usingfeatured_posts[0].id. We'll need this to determine whether the featured post is included in the normal recent posts or not.

{% set featured_post_id = featured_posts[0].id %}

Step 3: Create an Array of IDs for Normal Recent Posts

To determine if the featured post is among the normal recent posts, we create an array of their IDs. Loop through the normal_recent_posts variable and use the post_array.append(post.id) code to add each post's ID to the array.

{% set post_array = [] %}
 {% for post in normal_recent_posts %}
      {% do post_array.append(post.id) %}
{% endfor %}

Step 4: Check if the Featured Post is Among Normal Recent Posts

We now check if the array of normal recent post IDs contains the ID of the featured post using the {% if post_array is containing featured_post_id %} code. If it does, we set the displayed_recent_posts variable to retrieve six recent posts instead of the usual five.

{% if post_array is containing featured_post_id %}
{% set displayed_recent_posts = blog_recent_posts('default', 6) %}
{% else %}
{% set displayed_recent_posts = blog_recent_posts('default', 5) %}
{% endif %}

Step 5: Display the Featured Post

To display the featured post at the top of the listing, we iterate over the featured_posts variable and use the code snippet below:

{% for post in featured_posts %}
 <div class="recent-post">
      <h3><a href="{{ post.absolute_url }}">{{ post.name }}</a></h3>
    </div>
  {% endfor %}

Step 6: Display Normal Posts

Finally, we iterate over the displayed_recent_posts variable and display the normal posts, excluding the featured post if its in there. Note that displayed_recent_posts will have 6 posts in it if the featured post is there (per Step 4). That's because we'll be hiding it like so:

{% for post in displayed_recent_posts %}
{% unless post.id == featured_post_id %}
    <div class="recent-post">
      <h3><a href="{{ post.absolute_url }}">{{ post.name }}</a></h3>
    </div>
{% endunless %}
  {% endfor %}

Let's put it all together:

{% set featured_posts = blog_recent_tag_posts("default", "featured", 1) %} {# featured is lowercase here as it's the slug #} {# also note we're using blog_recent_tag_posts to get the posts not blog_tags #}

{% set normal_recent_posts = blog_recent_posts('default', 5) %}

{% set featured_post_id = featured_posts[0].id %}

{# we want to work out if the featured post would show in the normal 5 recent posts, so we create an array of their ids #}
{% set post_array = [] %}
 {% for post in normal_recent_posts %}
      {% do post_array.append(post.id) %}
{% endfor %}

{# if the featured post is in the standard 5 we're going to add an extra post (6 total) so we can hide the featured in the loop #}
{% if post_array is containing featured_post_id %}
{% set displayed_recent_posts = blog_recent_posts('default', 6) %}
{% else %}
{% set displayed_recent_posts = blog_recent_posts('default', 5) %}
{% endif %}

{# FEATURED POST #}

 {% for post in featured_posts %}
 <div class="recent-post">
      <h3><a href="{{ post.absolute_url }}">{{ post.name }}</a></h3>
    </div>
  {% endfor %}

{# NORMAL POSTS #}
  {% for post in displayed_recent_posts %}
{% unless post.id == featured_post_id %}
    <div class="recent-post">
      <h3><a href="{{ post.absolute_url }}">{{ post.name }}</a></h3>
    </div>
{% endunless %}
  {% endfor %}

By following these steps and incorporating the provided code, you can effectively display a featured blog post at the top of your listing, ensuring it catches the attention of your readers. This approach allows you to highlight important content while maintaining a clean and organized blog layout. Enhance your blog's engagement and provide a seamless user experience by implementing this simple yet powerful feature.