Mixing HubSpot Blog Posts: A Developer's Guide to Combined Listings

So, you're looking to combine posts from multiple HubSpot blogs into a single, unified listing, sorted by publish date? It's a common challenge, and thankfully, the HubSpot Community has some great solutions. Let's dive into how you can achieve this using HubL.

The Challenge: Merging and Sorting Blog Posts

The original poster needed to display posts from two separate HubSpot blogs—case studies and insights—in a single feed, ordered chronologically. The initial approach involved fetching posts from each blog using blog_recent_posts(), but the challenge was merging these results and sorting them by date.

The core questions were:

1. What's the correct property to use for the publish date?
2. What format is that date field?
3. What's the best HubL approach to merge and sort?

The Solution: HubL to the Rescue

One community member provided a concise HubL snippet that effectively addresses the problem. Here’s a breakdown:

{% set case_posts = blog_recent_posts(case_studies_blog_id, 200) %}
{% insight_posts = blog_recent_posts(insights_blog_id, 200) %}

{% set all_posts = blog_recent_posts(case_studies_blog_id, 200) ~ blog_recent_posts(insights_blog_id, 200)|sort(false, false, "publish_date") %}

...

{% for single_post in module.all_posts %}
{{ single_post.title }}
{{ single_post.publish_date|format_datetime('MM/YYYY') }} {# info: the datetime format is completely up to you #}
{{ single_post.post_body|striptags|truncatehtml(150) }}
{% endfor %}

Step-by-Step Explanation

1. Fetch Posts: The code starts by fetching posts from each blog using blog_recent_posts().
2. Concatenate and Sort: The key is the ~ operator, which concatenates the two lists of posts. Then, the |sort filter sorts the combined list. The parameters false, false, "publish_date" specify ascending order, case-insensitive comparison (both false), and sorting by the publish_date property.
3. Loop and Display: Finally, a for loop iterates through the combined and sorted all_posts list, displaying the title, publish date, and a truncated version of the post body.

Important Considerations

• Date Property: As demonstrated, publish_date is the correct property to use for the publish date. It's typically an integer timestamp.
• Variable Scope: Remember that within the for loop, you access post properties relative to the loop variable (e.g., single_post.title).
• Datetime Formatting: The |format_datetime filter allows you to customize the date format as needed.

Alternative Approaches

While the HubL solution is efficient, you could also consider client-side approaches using JavaScript, especially if you're already using JS for filtering and pagination. However, the HubL method is generally preferred for its simplicity and server-side rendering benefits.

ESHOPMAN Team Comment

This is a classic HubSpot challenge, and the provided HubL solution is spot-on. We at ESHOPMAN appreciate the clear and concise code example. Combining the concatenation operator (~) with the sort filter is an elegant way to achieve the desired result. For those looking to create a free ecommerce website create, understanding these CMS fundamentals is crucial when integrating blog content with your storefront.

By using this approach, you can seamlessly integrate content from different sources within your HubSpot CMS, providing a more cohesive and engaging experience for your audience. Remember to adjust the code snippets to match your specific blog IDs and desired date formats.