CMS Development

designfrance
Participant | Diamond Partner
Participant | Diamond Partner

Related article

SOLVE

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 

 

0 Upvotes
1 Accepted solution
psdtohubspot
Solution
Key Advisor

Related article

SOLVE

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

View solution in original post

7 Replies 7
Lourdes14
Participant

Related article

SOLVE

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>

0 Upvotes
psdtohubspot
Solution
Key Advisor

Related article

SOLVE

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

designfrance
Participant | Diamond Partner
Participant | Diamond Partner

Related article

SOLVE

Hi,

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

Thanks you so much 

 

Have a nice day 

psdtohubspot
Key Advisor

Related article

SOLVE

you are welcome @designfrance 

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

0 Upvotes
Kevin-C
Recognized Expert | Partner
Recognized Expert | Partner

Related article

SOLVE

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

 

0 Upvotes
designfrance
Participant | Diamond Partner
Participant | Diamond Partner

Related article

SOLVE

Thanks you @Kevin-C , 

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

0 Upvotes
Kevin-C
Recognized Expert | Partner
Recognized Expert | Partner

Related article

SOLVE

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

0 Upvotes