Related post by tag

Developer Support CMS Development
1

Buenas estoy intentando crea una seccion de articulos relacionado por tag he segido la informacion de esta web: Creating a related blog post listing with the blog related posts HubL tag - HubSpot docs ,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>
2

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! :slightly_smiling_face: