HubSpot Related Posts Based on Tag Module [Code Snippet]


HubSpot Related Posts Based on Tag Module [Code Snippet]

The code snippet below lists related posts based on the current post tags used. The HubSpot developer docs has a code example using a Javascript formatter but I was unable to get this to resize the featured image. So I created the code below to use a HubL macro instead.

HubSpot Module HTML + HubL

{% macro blog_post_formatter(post) %}
<div class="recent-post">
  <div class="post-image">
    <a href="{{ post.absolute_url }}" style="opacity:1">
  <picture>
     <source srcset="{{ resize_image_url(post.featured_image, 800) }}" media="(min-width: 500px)">
     <img src="{{ resize_image_url(post.featured_image, 400) }}" alt="{{ post.featured_image_alt_text }}" loading="lazy" >
  </picture>
    </a>
  </div>
  <div class="recent-post-content">
    <div class="same-height">
      <div class="post-title"><a href="{{ post.absolute_url }}">{{ post.name }}</a></div>
      <div class="tags">
        {% for topic in post.topic_list %}
        {% if loop.first %}
          <a href="https://bitlyft.com/resources/tag/{{ topic.slug }}">{{ topic.label }}</a>
        {% endif %}
        {% endfor %}
      </div>
      <div class="truncate">{{ post.post_summary|striptags|truncatehtml(200) }}</div>
    </div>
    <div class="post-date">{{ post.publish_date|format_date('M/d/yyyy') }}</div>
  </div>
</div>
{% endmacro %}


<div class="recent-post-sec">
    <div class="container">
        <div class="title text-center">
            <h2>{{ module.title }}</h2>
        </div>

        <div class="recent-post-wrapper flex row-wrap">
          {% set post_tags = content.tagList|join(", ") %}
          {% related_blog_posts limit=3, tags="{{ post_tags }}" post_formatter="blog_post_formatter" %}
        </div>    
    </div>
</div>    

About the Author

Jacob Lett (Jake) is the founder of Bootstrap Creative, a B2B marketing consultancy specializing in manufacturers and industrial companies. A HubSpot-certified CMS developer, SEO, Answer Engine Optimization (AEO), and RevOps professional, he helps B2B companies improve their websites, search visibility, HubSpot systems, and Google Ads campaigns to generate more qualified leads and RFQs. With over a decade of hands-on experience, he acts as a direct partner for companies seeking measurable ROI from their marketing investment.



Topic:

Related posts
Category: Code Snippets

Tags:

| Read My Editorial Policy

Want to Get Email Updates of New Articles?

Join My Email Newsletter