Related article

SOLVE
Highlighted
Occasional Contributor

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 

 

Reply
0 Upvotes
1 Accepted solution

Accepted Solutions
Highlighted
Advisor | Partner

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 PostRelated Blog Post
Feel free to reach if any questions.
Happy to help!

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

Reply
0 Upvotes
6 Replies 6
Highlighted
Regular Advisor | Partner

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 ) %}

 

Reply
0 Upvotes
Highlighted
Occasional Contributor

Thanks you @Kevin-C , 

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

Reply
0 Upvotes
Highlighted
Regular Advisor | Partner

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

Reply
0 Upvotes
Highlighted
Advisor | Partner

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 PostRelated Blog Post
Feel free to reach if any questions.
Happy to help!

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

Reply
0 Upvotes
Highlighted
Occasional Contributor

Hi,

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

Thanks you so much 

 

Have a nice day 

Highlighted
Advisor | Partner

you are welcome @designfrance 

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

Reply
0 Upvotes