Related article

[designfrance]

My blog : http://knaufinsulation-5974320.hs-sites.com/blog

When we go to an article, at the bottom of the page there is section "Ces articles peuvent aussi vous intéressez". 

there are three articles displayed, but they are all the same. I do not understand what it does not work in my code, I would like to have the display of three different articles. 

I created a custom module for the related article :

<div class="page-center content-wrapper">
  <div class="blog-section">
    <div class="blog-listing-wrapper cell-wrapper">
      <div class="blog-section">
        <div class="blog-listing-wrapper cell-wrapper">
          <h3 class="hs-author-listing-header">Ces articles peuvent aussi vous intéressez</h3>
          <div class="post-related">
      {% for topic in content.topic_list %}
      {% if loop.first %}
      {% set related_posts = blog_recent_topic_posts('default', topic.slug, 4 ) %}
      {% for post in related_posts %}
      {% unless content.absolute_url == post.absolute_url %}
           
            <div class="post-item">           
              <div class="post-inner">
                <div class="hs-featured-image-wrapper" style="background: url({{ resize_image_url( content.post_list_summary_featured_image,400 ) }}) 
                                                              no-repeat; background-size:cover; ">
                  {% for tag in content.tag_list %} {% set t = t + 1 %} {% if t == 1 %}
                  <a class="topic-link tag-link" href="{{ blog_tag_url(group.id, tag.slug) }}">{{ tag.name }}</a> {% endif %} {% endfor %}
                </div>     
                <div class="post-header">
                  <div class="date">
                    {{ content.publish_date_local_time.strftime('%d %B %Y') }} 
                  </div>
                  <h2><a href="{{content.absolute_url}}">{{ content.name }}</a></h2>
                  <p>{{ content.post_summary|striptags|truncate(120, breakword=False, end='...') }}</p>
                  <div class="post-description-btn">
                    <a class="more-btn" href="{{ rec_post.absolute_url }}">Lire l'article </a>
                  </div>
                </div>
              </div>
            </div>
      {% endunless %}
      {% endfor %}
      {% endif %}
      {% endfor %}
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Thanks for your help 

[Lourdes14]

Hello! Under my posts i have the section about related articules, but they seem to be random and i want to have a relation between the main post and the related post. I dont know if it is posibble to relate them by tag or topic.

Now i have this code: 

<div class="recent-posts">
{% if content.topic_list %}
{% for topic in content.topic_list %}
{% if loop.first %}
{% set counter = 0 %}
{% set related_posts = blog_recent_topic_posts('default', topic.slug, 4 ) %}
{% for post in related_posts %}
{% unless content.absolute_url == post.absolute_url %}
{% set counter = counter + 1 %}
{% if counter < 4 %}
<div class="recent-post">
<a href="{{ post.absolute_url }}">
<div class="recent-post-featured-image" style="background-image: url('{{ post.featured_image }}')"></div>
</a>
<div class="recent-post-content">
<p class="recent-post-info">
<i style="color:#1883b3;" class="fa fa-calendar"></i>
{{ post.publish_date|datetimeformat('%d %B, %Y') }} &nbsp;&nbsp;&nbsp;
<i class="fa fa-tags" style="color:#1883b3;"></i>
<a class="topic-related" href="{{ group.absolute_url }}/topic/{{ content.topic_list[0].slug }}">
{{post.topic_list[0].name }}
</a>
</p>
<a href="{{ post.absolute_url }}">
<h4 class="recent-post-title">{{ post.name }}</h4>
<p class="recent-post-read-more hs-button primary" href="{{ post.absolute_url }}">Seguir leyendo</p>
</a>
</div>
</div>
{% endif %}
{% endunless %}
{% endfor %}
{% endif %}
{% endfor %}
{% endif %}
</div>

[psdtohubspot · Accepted solution]

Hi @designfrance 

Please Paste this code and Modify the element accordingly, 100% sure it will work
Note: you need to add style as required.

<div class="related-post-section section-padding">

{% if content.post_body %}
<h3 class="related-post-title align-center">You may also like:</h3>
<div class="wrapper">
<div class="row-fluid-wrapper">
<div class="related-post post-listing row-fluid">
{% set related_posts = blog_recent_posts('default', 200) %}
            {% set counter = [] %}
            {% set post_topic_slug = content.topic_list[0].slug %}
            {% for post in related_posts %}
                {% set matched = [] %}
                {% for t in post.topic_list %}
                    {% if post_topic_slug and t.slug == post_topic_slug %}
                        {% if matched.append(1) %}{% endif %}
                    {% endif %}
                {% endfor %}
                {% if (counter|length < 3) and (content.absolute_url != post.absolute_url) and (matched|length > 0) %}
                    {% if counter.append(1) %}{% endif %} {# increment counter by 1 #}
<div class="post-item span4">
<div class="main-list post-item-inner">
{% if post.post_list_summary_featured_image %}
<div class="hs-featured-images-wrapper">
<a href="{{post.absolute_url}}" title="" class="hs-featured-images-link">
<span style="background:url({{ post.post_list_summary_featured_image }})no-repeat;" class="hs-featured-images">

</span>
</a>

</div>
{% endif %}
<div class="post-body clearfix">
<div class="post-header clearfix">
<div class="post-list-topics">
{% if post.topic_list %}
{% for topic in post.topic_list %}
<a class="topic-link topic-seq-{{loop.index}}" href="{{ group.absolute_url }}/topic/{{ topic.slug }}">{{ topic.name }}</a>
{% endfor %}
{% endif %}
</div>
<h2 class="post-title-related"><a href="{{post.absolute_url}}">{{ post.name }}</a></h2>
 <p>{{ post.post_summary|striptags|truncate(120,true,'...') }}</p>
</div>
<!--post summary-->
</div>
<a class="read-more-link" href="{{ post.absolute_url }}"></a>      
</div>
</div>

{% endif %}
{% endfor %}
</div>
</div>
{% endif %}
</div>

</div>





<script>$(document).ready(function() {
if ($(".related-post .post-item").length === 0) {
$(".related-post-section").remove();
}
});

</script>

Have a  look here http://psdtohubspot-2432204.hs-sites.com/creative-blog/lorem-ipsum-is-simple-dummy-text-used-as-dumm...

Related Blog Post
Feel free to reach if any questions.
Happy to help!

Thanks!
Ajit
Please Mark this Solution Accepted, if Solution worked for you

[designfrance]

Hi,

That's just perfect !!  it's work !!!! 

Thanks you so much 

Have a nice day 

[psdtohubspot]

you are welcome @designfrance 

Thanks!
Ajit
Please Mark this Solution Accepted, if Solution worked for you

[Kevin-C]

Hey @designfrance 

Just a guess but I believe the "blog_recent_topic_posts" has been depreciated, and replaced with "blog_recent_tag_posts".

Maybe try updating the code with this line:

{% set related_posts = blog_recent_tag_posts('default', tag.slug, 4 ) %}

[designfrance]

Thanks you @Kevin-C , 

I just tried your suggestion, it clears the articles in the related article. The Three Articles Disappear... 😕 

[Kevin-C]

Hmmm interesting. Here is the article I pulled the reference from. Maybe that'll help.