# Related article

**URL:** <https://community.hubspot.com/t/related-article/22343>\
**Category:** CMS Development\
**Created:** [July 1, 2020, 1:31pm UTC](https://community.hubspot.com/t/related-article/22343 "2020-07-01T13:31:08Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![designfrance](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/designfrance/32/35608_2.png) [@designfrance](https://community.hubspot.com/u/designfrance)\
**Post date:** [July 1, 2020, 1:31pm UTC](https://community.hubspot.com/t/related-article/22343/1 "2020-07-01T13:31:08Z")

</div>

My blog : [http://knaufinsulation-5974320.hs-sites.com/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 :

```auto
<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

---

<div class="post-metadata">

**Author:** ![Kevin-C](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/kevin-c/32/34570_2.png) [@Kevin-C](https://community.hubspot.com/u/Kevin-C)\
**Post date:** [July 1, 2020, 1:41pm UTC](https://community.hubspot.com/t/related-article/22343/2 "2020-07-01T13:41:06Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![designfrance](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/designfrance/32/35608_2.png) [@designfrance](https://community.hubspot.com/u/designfrance)\
**Post date:** [July 1, 2020, 1:48pm UTC](https://community.hubspot.com/t/related-article/22343/3 "2020-07-01T13:48:01Z")

</div>

Thanks you @Kevin-C ,

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

---

<div class="post-metadata">

**Author:** ![Kevin-C](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/kevin-c/32/34570_2.png) [@Kevin-C](https://community.hubspot.com/u/Kevin-C)\
**Post date:** [July 1, 2020, 2:00pm UTC](https://community.hubspot.com/t/related-article/22343/4 "2020-07-01T14:00:45Z")

</div>

Hmmm interesting. [Here is the article I pulled the reference from](https://developers.hubspot.com/docs/cms/hubl/functions#blog-recent-tag-posts). Maybe that’ll help.

---

<div class="post-metadata">

**Author:** ![psdtohubspot](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/psdtohubspot/32/70262_2.png) [@psdtohubspot](https://community.hubspot.com/u/psdtohubspot)\
**Post date:** [July 1, 2020, 8:45pm UTC](https://community.hubspot.com/t/related-article/22343/5 "2020-07-01T20:45:01Z")

</div>

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

```auto
<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 [Lorem Ipsum is simple dummy text used as dummy.](http://psdtohubspot-2432204.hs-sites.com/creative-blog/lorem-ipsum-is-simple-dummy-text-used-as-dummy-15)

 ![28797i0DA3B19DCEC4D53B.jpg](https://d2qpr2jzcazej7.cloudfront.net/original/3X/3/9/3905aee5653fec80ccf21b13c0488742b63fc235.jpeg)  
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**

---

<div class="post-metadata">

**Author:** ![designfrance](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/designfrance/32/35608_2.png) [@designfrance](https://community.hubspot.com/u/designfrance)\
**Post date:** [July 2, 2020, 7:01am UTC](https://community.hubspot.com/t/related-article/22343/6 "2020-07-02T07:01:17Z")

</div>

Hi,

That’s just perfect !! it’s work !!!

Thanks you so much

Have a nice day

---

<div class="post-metadata">

**Author:** ![psdtohubspot](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/psdtohubspot/32/70262_2.png) [@psdtohubspot](https://community.hubspot.com/u/psdtohubspot)\
**Post date:** [July 2, 2020, 7:15am UTC](https://community.hubspot.com/t/related-article/22343/7 "2020-07-02T07:15:06Z")

</div>

you are welcome @designfrance  
Thanks!  
Ajit  
**Please Mark this Solution Accepted, if Solution worked for you**

---

<div class="post-metadata">

**Author:** ![Lourdes14](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/lourdes14/32/18373_2.png) [@Lourdes14](https://community.hubspot.com/u/Lourdes14)\
**Post date:** [December 1, 2020, 10:59am UTC](https://community.hubspot.com/t/related-article/22343/8 "2020-12-01T10:59:53Z")

</div>

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\>