Related post by tag

[CMaya]

Buenas estoy intentando crea una seccion de articulos relacionado por tag he segido la informacion de esta web: https://developers.hubspot.com/docs/cms/guides/creating-a-related-post-listing ,pero no me muestra nada el codigo que inplementado es este:

{% set tag = [] %}
{# Recogo todos los tag del post y los guardo #}
{% for topic in content.topic_list %}
   {% set tag += {{ topic.name }} %}
   {% set _dummyvar = tag.append(topic.name)%}
{% endfor %}

{# Imprimo el valor para comprobar #}
<p>
  {{ tag }}
</p>


{% related_blog_posts limit=4, tags={{ tag }}, callback="blog_post_formatter" %}


<script>
  var blog_post_formatter = function(blogposts) {

    var formatted = "<div>";
    for (var i = 0; i < blogposts.length; i++) {
      var blogpost = blogposts[i];
      formatted += '<div class="related-blog-item">';
      formatted += `<span>Related Post ${i + 1}/${blogposts.length}</span><br>`;
      formatted += `<a class="related-blog-title" href="${blogpost.url}"><span>${blogpost.name}</span></a>`;
      formatted += `<div class="hs-related-blog-byline">by <span class="related-blog-author">${blogpost.blogAuthor.fullName}</span><span class="related-blog-posted-at"> posted on </span><span class="related-blog-date">${new Date(blogpost.publishDate).toLocaleDateString()}</span></div>`;
      formatted += `<p class="related-blog-post-summary">${blogpost.postSummary}<a href="${blogpost.url}">Read more</a></p>`;
      formatted += '<div class="related-blog-tags">';
      if (blogpost.tagList.length > 0) {
        formatted += `Tags: ${blogpost.tagList.map(tag => tag.label).join(", ")}`;
      }
      formatted += '</div>';
      
      if (blogpost.featuredImage) {
        formatted += `<img src="${blogpost.featuredImage}" alt="${blogpost.featuredImageAltText}">`;
      }
      formatted += '</div>';
    }
    formatted += '</div>';
    return formatted;
  }
</script>

[DanielSanchez · Accepted solution]

Hi @CMaya ,

I will send 1 code that I use for related posts on my blogs. Remembering that this code is to be inserted in the blog post, not in the listing.

I only send the code to check how I do it. You can apply CSS for styling.

{% if content.topic_list %}
<div class="relatedPost">
  <h3>Veja mais conteúdos da UMC
sobre EAD e educação</h3>
  <div class="row-fluid">
    {% set max_posts = 3 %}{# Set the max number of related posts to be output to the page here #}
    {% set post_list = [] %}
    {% for topic in content.topic_list %}
    {% set post_list = post_list + blog_recent_topic_posts('default', topic.slug, max_posts + 1 ) %}
    {% if loop.last %}
    {% set post_list = post_list|sort(true, false, 'publish_date')|unique('name') %}
    {% set i = 0 %}
    {% for post in post_list %}
    {% if content.absolute_url != post.absolute_url and i < max_posts %}
    
    
  
    
    
      <div class="post-item">
         <div class="Post-Item-Inner">
           <a class="more-link-full-link" href="{{ post.absolute_url }}"></a> <!-- link more full link -->
        
            <div class="featured">
                                    <!--post summary-->
                                    {% if content.post_list_summary_featured_image %}
                                        <div class="hs-featured-image-wrapper post-list" style="background-image: url('{{ post.featured_image }}');">
                                            <!--<a href="{{content.absolute_url}}" title="" class="hs-featured-image-link"></a>-->
                                            {% if content.topic_list %}
                                     <p id="hubspot-topic_data"><!-- Tópicos:-->
                                        {% for topic in content.topic_list %}
                                            <a class="topic-link" href="{{ blog_tag_url(group.id, topic.slug) }}">{{ topic.name }}</a>{% if not loop.last %}{#,#}{% endif %}
                                        {% endfor %}
                                     </p>
                                {% endif %}
                                          
                                          
   
            
            
                                        </div>
                                    {% endif %}
                                   
                                </div>
           
            <div class="post-header">
                                    <h2>
                <a href="{{post.absolute_url}}">{{ post.name}}</a>
              </h2>
                                   
            </div>
                                <div class="post-body clearfix listblog-na5">
                                    
                                    <!--{{ post.post_list_content|safe }}-->
                                    {{ post.post_list_content|striptags|truncate(120, breakword=False, end='...')}}
                                </div>
            
           
           <span class="reading-minutes">
                             {{ post.post_body|wordcount|divide(300) }} min de leitura
                          </span>
           
           
           
           
        
      </div>
    </div>
    {% set i = i + 1 %}
    {% endif %}
    {% endfor %}
    {% endif %}
    {% endfor %}
  </div>
  {% for topic in content.topic_list %}
    <a class="btn-related-posts-see-more" href="{{ blog_tag_url(group.id, topic.slug) }}">Ver mais conteúdos<span>sobre {{ topic.name }}</span></a>{% if not loop.last %}{#,#}{% endif %}
  {% endfor %}


</div>
{% endif %}

Hope this helps!

Did this post help solve your problem? If so, please mark it as a solution.

Best! 🙂