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 B2B marketing consultant with over 15 years of experience in the digital marketing industry. He specializes in SEO, HubSpot, and PPC campaign management. Jake has a proven track record of helping businesses increase their online visibility and drive more traffic, leads and sales. He is a Certified Google Ads Specialist and a Certified HubSpot Developer.

Related posts

Tags:

Want to Get Email Updates of New Articles?

Join My Email Newsletter