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>    

Written by: Jake Lett
Jake Lett is a results-driven B2B marketing consultant with 15+ years of experience helping businesses boost online visibility, generate qualified leads, and increase sales. Specializing in SEO, HubSpot, and PPC campaign management, Jake leverages proven strategies to deliver measurable growth. As a Certified Google Ads Specialist and HubSpot Developer, he is committed to driving impactful results for his clients.

Related posts

Tags:

Want to Get Email Updates of New Articles?

Join My Email Newsletter