Blog, Website & Page Publishing

MBFitz
Participant | Diamond Partner
Participant | Diamond Partner

Automatic Related Posts based on Blog Tags

SOLVE

Hi, I'm wondering where I've went wrong trying to implement the related posts HubL on my site. What I need is for up to 6 related blog posts to populate automatically on a single blog post, based on that posts' tags. It should be able to use the post tags, and pull in other related blog posts. I've created a module, but nothing is being pipulated at this time. Here's my code: 

 

<section class="related">
  <h3>
    Related Products
  </h3>
  <div class="post-listing">
   {% macro blog_post_formatter(blog_post) %}
      <a href="{{blog_post.url}}">
        <div class="wrapper" style="background: #fff url('{{ blog_post.featured_image_url }}') no-repeat top center / 100% auto;">
          <h4>
            {{blog_post.name}}
          </h4>
          {% if blog_post.post_summary|length %}
            <p>
              {{ blog_post.post_summary|safe }}
            </p>
          {% endif %}
        </div>
      </a>
    {% endmacro %}
    
    {% set tagNames = content.tag_names %}

	  {% related_blog_posts blog_ids="1234567" limit="6", tags="{{tagNames|join(',')}}", start_date="{{year - 1}}-01-01", post_formatter="blog_post_formatter"  %}
  
  </div>
</section>

I've veen tried the most simple implementation in the tutorials, and still, nothing gets pulled in. Please help! 

1 Accepted solution
Sjardo
Solution
Top Contributor | Elite Partner
Top Contributor | Elite Partner

Automatic Related Posts based on Blog Tags

SOLVE

Hi,

 

We are running 2 related post based on tags on bureuvet.nl/blog.

A quick copy and paste of our module with some inline documentation: 

 

{% if content.topic_list %}
    {% set max_posts = 2 %} {# Set the max number of related posts to be output to the page here #}
    {% set count = 0 %}
    {% for topic in content.topic_list %}
        {% if loop.index  == 1 %}
            {% set topic_one = blog_recent_topic_posts('default', topic.slug, max_posts + 1 ) %}
            {% if topic_one|length == 1 %}
                {#<p>There are no related posts</p>#}
            {% endif %}
        {% elif loop.index == 2 %}
            {% set topic_two = blog_recent_topic_posts('default', topic.slug, max_posts + 1 ) %}
        {% elif loop.index == 3 %}
            {% set topic_three = blog_recent_topic_posts('default', topic.slug, max_posts + 1 ) %}
        {% endif %}
        {% if loop.length >= 3 and loop.index == 3 %}
            {% set related_posts = (topic_one + topic_two + topic_three)|sort(true, false, 'publish_date')|unique('name') %}
            {% set loop_count = 3 %}
        {% elif loop.length == 2 and loop.index == 2 %}
            {% set related_posts = (topic_one + topic_two)|sort(true, false, 'publish_date')|unique('name') %}
            {% set loop_count = 2 %}
        {% elif loop.length == 1 and loop.index == 1 %}
            {% set related_posts = topic_one %}
            {% set loop_count = 1 %}
        {% endif %}
        {% if loop.index == loop_count %}
						{% if topic_one|length != 1 %}
              <div class="related-post-items">
              <div class="related-post-header-title">Related articles</div>
              <div class="post-listing test1">
                {% for post in related_posts %}
                    {% if content.absolute_url != post.absolute_url and count < max_posts %}

                        <a class="post-item" href="{{post.absolute_url}}" title="{{ post.name|striptags }}" {# post image {% if post.post_list_summary_featured_image %}style="background-image:url('{{ resize_image_url( post.post_list_summary_featured_image , 0, 0, 600) }}');"{% endif %}#}>
                          <div class="top">
                            {# Tags #}
                            <p class="tags">
                              {% if post.topic_list %}{% for topic in post.topic_list %}{{ topic.name }}{% if not loop.last %} | {% endif %}{% endfor %}{% endif %}
                            </p>

                            {# Title #}
                            <div class="title">{{ post.name }}</div>

                          </div>
                          <div class="bg"></div>
                          <div class="bottom">

                            <div class="author-info">
                              {# Date #}
                              {# <div class="published-date">{{ post.publish_date_localized }}</div> #}

                              {# Author #}
                              {%if post.blog_post_author %}
                              <div class="author">{{ post.blog_post_author.display_name }}</div>
                              {% endif %}
                            </div>
                            {# Read more #}
                            <div class="read-more">Read more</div>

                          </div>

                        </a>

                        {% set count = count + 1 %}
                    {% endif %}
                {% endfor %}
                </div>
                </div>
							{% endif %}
        {% endif %}
    {% endfor %}
{% endif %} 

 

 

I hope this helps! if you need some more info about what we are actually doing, let me know 🙂

View solution in original post

11 Replies 11
ISupport8
Participant

Automatic Related Posts based on Blog Tags

SOLVE

This is exactly what we needed. Thank you so much. It seems that the content.topic_list is what we needed instead of content.tagList

Sjardo
Solution
Top Contributor | Elite Partner
Top Contributor | Elite Partner

Automatic Related Posts based on Blog Tags

SOLVE

Hi,

 

We are running 2 related post based on tags on bureuvet.nl/blog.

A quick copy and paste of our module with some inline documentation: 

 

{% if content.topic_list %}
    {% set max_posts = 2 %} {# Set the max number of related posts to be output to the page here #}
    {% set count = 0 %}
    {% for topic in content.topic_list %}
        {% if loop.index  == 1 %}
            {% set topic_one = blog_recent_topic_posts('default', topic.slug, max_posts + 1 ) %}
            {% if topic_one|length == 1 %}
                {#<p>There are no related posts</p>#}
            {% endif %}
        {% elif loop.index == 2 %}
            {% set topic_two = blog_recent_topic_posts('default', topic.slug, max_posts + 1 ) %}
        {% elif loop.index == 3 %}
            {% set topic_three = blog_recent_topic_posts('default', topic.slug, max_posts + 1 ) %}
        {% endif %}
        {% if loop.length >= 3 and loop.index == 3 %}
            {% set related_posts = (topic_one + topic_two + topic_three)|sort(true, false, 'publish_date')|unique('name') %}
            {% set loop_count = 3 %}
        {% elif loop.length == 2 and loop.index == 2 %}
            {% set related_posts = (topic_one + topic_two)|sort(true, false, 'publish_date')|unique('name') %}
            {% set loop_count = 2 %}
        {% elif loop.length == 1 and loop.index == 1 %}
            {% set related_posts = topic_one %}
            {% set loop_count = 1 %}
        {% endif %}
        {% if loop.index == loop_count %}
						{% if topic_one|length != 1 %}
              <div class="related-post-items">
              <div class="related-post-header-title">Related articles</div>
              <div class="post-listing test1">
                {% for post in related_posts %}
                    {% if content.absolute_url != post.absolute_url and count < max_posts %}

                        <a class="post-item" href="{{post.absolute_url}}" title="{{ post.name|striptags }}" {# post image {% if post.post_list_summary_featured_image %}style="background-image:url('{{ resize_image_url( post.post_list_summary_featured_image , 0, 0, 600) }}');"{% endif %}#}>
                          <div class="top">
                            {# Tags #}
                            <p class="tags">
                              {% if post.topic_list %}{% for topic in post.topic_list %}{{ topic.name }}{% if not loop.last %} | {% endif %}{% endfor %}{% endif %}
                            </p>

                            {# Title #}
                            <div class="title">{{ post.name }}</div>

                          </div>
                          <div class="bg"></div>
                          <div class="bottom">

                            <div class="author-info">
                              {# Date #}
                              {# <div class="published-date">{{ post.publish_date_localized }}</div> #}

                              {# Author #}
                              {%if post.blog_post_author %}
                              <div class="author">{{ post.blog_post_author.display_name }}</div>
                              {% endif %}
                            </div>
                            {# Read more #}
                            <div class="read-more">Read more</div>

                          </div>

                        </a>

                        {% set count = count + 1 %}
                    {% endif %}
                {% endfor %}
                </div>
                </div>
							{% endif %}
        {% endif %}
    {% endfor %}
{% endif %} 

 

 

I hope this helps! if you need some more info about what we are actually doing, let me know 🙂

sharonlicari
Community Manager
Community Manager

Automatic Related Posts based on Blog Tags

SOLVE

Hey @ISupport8 

 

Thank you for reaching out! I'll bring to this conversation a few experts that might be able to guide you. 

 

Hey @Chris-M @Sjardo @Theodor do you have any recommendations for @ISupport8?

 

Thanks

Sharon 


Did you know that the Community is available in other languages?
Join regional conversations by changing your language settings !




ISupport8
Participant

Automatic Related Posts based on Blog Tags

SOLVE

We are running into a similar issue. Related posts that are being shown are not correlated to the tag of the current post.

This is what we've set as the tag name

 

{% set tagNames = content.tagList|join(", ") %}

{% related_blog_posts tags=tagNames, blog_ids="33042692797", limit=3, post_formatter="post_formatter_standard" %}

 

We've gone ahead and changed the tagNames with different methods. Such as:

content.tag_names|lower|replace(' ','-')

 

Is there someething we are doing wrong? It seems like it may be a bug with hubspot.

0 Upvotes
jamesCutler
HubSpot Product Team
HubSpot Product Team

Automatic Related Posts based on Blog Tags

SOLVE

Hi Maribeth, I'm not sure if you've solved this by now, but I figured I'd share my thoughts...

 

The issue I'm seeing is how the Related Posts tag is being called:

{% related_blog_posts blog_ids="5071829" limit="6", tags="{{tagNames|join(',')}}", start_date="{{year - 1}}-01-01", post_formatter="blog_post_formatter"  %}

Whenever you are within a HubL declaration ( {% ... %} ), you do not need to use {{ }} to reference HubL variables, you can just write the variables without the {{ }}. Also the 'limit' attribute value does not need to be in quotes:

{% related_blog_posts blog_ids="5071829" limit=6, tags=tagNames|join(','), start_date=(year - 1)|string~"-01-01", post_formatter="blog_post_formatter"  %}

Here is HubSpot's article on using the Blog Related Posts tag, which has some examples of different uses of the tag - https://designers.hubspot.com/tutorials/creating-a-related-post-listing

 

Hope this helps!

0 Upvotes
MBFitz
Participant | Diamond Partner
Participant | Diamond Partner

Automatic Related Posts based on Blog Tags

SOLVE

Hi James, 

 

Thanks for your reply! I updated my code to the correct syntax, however I'm still not seeing any related posts. 😞 

 

Here's my updated code:

{% set tagNames = content.tag_names %}
{% related_blog_posts blog_ids="5071829", limit=6, tags=tagNames|join(','), post_formatter="blog_post_formatter" %}

 

I know there should be a few related posts rendered based on tags, so I'm not sure why they're not showing up. Do you have any other thoughts? 

 

Thanks! 

0 Upvotes
jamesCutler
HubSpot Product Team
HubSpot Product Team

Automatic Related Posts based on Blog Tags

SOLVE

Hi MaryBeth,

 

Okay, at least we've ruled out the syntax causing the issue...


Looking at the blog ID you're using, this is me grasping at straws, but I'm wondering if that's not the correct ID? Usually I'd expect it to be a longer number like '5900440271'. For reference, the ID of a blog can be found in the URL of the blog dashboard: 

https://app.hubspot.com/blog/[PORTAL ID]/blogs/[BLOG ID]/manage/posts/all

 

Additionally, you're assigning the 'tagNames' variable the value of 'content.tag_names' - if you are not viewing this module in the context of a blog post (previewing the module in the design manager, for example), this variable would not be set properly.

 

Hopefully this gets us a bit further, let me know if I need to clarify anything.

 

Best,
James

0 Upvotes
MBFitz
Participant | Diamond Partner
Participant | Diamond Partner

Automatic Related Posts based on Blog Tags

SOLVE

Hi James, 

 

The blog post ID fixed one issue - so now it is pulling in the correct posts, however, it isn't using the macro that I set and it's just using the default markup when it prints the related posts. 

 

Any thoughts on that? 

 

Thank you so much for your help! 

0 Upvotes
jamesCutler
HubSpot Product Team
HubSpot Product Team

Automatic Related Posts based on Blog Tags

SOLVE

Hi Maribeth,

 

Sounds like we're making progress! 

 

I wonder if the way you've defined your macro is causing it to not be usable by the related posts tag. Your macro takes one argument:

{% macro blog_post_formatter(blog_post) %}

but the custom macro for the related posts tag is supposed to take three arguments:

{% macro blog_post_formatter(blog_post, index, count) %}

I wonder if the tag is rejecting your macro and falling back to using the default formatter, because it is unable to call your macro using the 'index' and 'count' arguments.

0 Upvotes
ramanverma2005
Participant

Automatic Related Posts based on Blog Tags

SOLVE

<h3><span>Similar Content</span></h3>

{% macro blog_post_formatter(content, index, count) %}

<div class="related-post-items">
<div class="title"><a href="{{ content.url}}">{{content.name}}</a></div>
<div class="post-body clearfix">
<a class="author-link" href="#">{{ blog_content.publishDate|datetimeformat('%B %e, %Y') }} </a>
</div>
</div>


{% endmacro %}

{% set tagNames = content.tag_names %}

{% related_blog_posts blog_ids="default" limit="3", tags="tagNames|join(',')", post_formatter="blog_post_formatter" %}


0 Upvotes
GilbertoAng
Member

Automatic Related Posts based on Blog Tags

SOLVE
0 Upvotes