Displaying Related Posts Problem

Developer Support CMS Development
1

I am working on a template and I have a blog related post module.

I want to show only 3 related blog posts. The filter can be also set form the the module’s gui interface, but to be sure, I altered the module’s code to limit the number of related blog posts to 3.

My problem is that wehn I test the module by previewing the module from the Design Tools it works properly and shows 3 related blog posts. When I am testing my website, some blog posts show 3 related blogs, but some others only show 2 related blogs.

Am I missing something? Thank you!

{# Column Count Large Screens #}

{% if module.layout_choice.select_layout ==‘card’ %}
{% set layoutChoice = ‘mwb-blog-related-posts__card’%}
{% elif module.layout_choice.select_layout ==‘card_without_image’ %}
{% set layoutChoice = ‘mwb-blog-related-posts__content-card’%}
{% elif module.layout_choice.select_layout ==‘compact’ %}
{% set layoutChoice = ‘mwb-blog-related-posts__compact’%}
{% endif %}

{# Column Count Large Screens #}

{% if module.column_count.desktop ==‘two’ %}
{% set columnCountDesktop = ‘mwb-blog-related-posts__col-two’%}
{% elif module.column_count.desktop ==‘three’ %}
{% set columnCountDesktop = ‘mwb-blog-related-posts__col-three’%}
{% endif %}

{# Column Count Medium Screens #}

{% if module.column_count.tablet ==‘two’ %}
{% set columnCountTablet = ‘mwb-blog-related-posts__col-two-tb’%}
{% elif module.column_count.tablet ==‘three’ %}
{% set columnCountTablet = ‘mwb-blog-related-posts__col-three-tb’%}
{% endif %}

{% set blog = module.blog %}
{% if module.layout_choice.select_layout ==‘card’ %}
{% set contents = blog_recent_posts(blog, 6 ) %}
{% elif module.layout_choice.select_layout ==‘card_without_image’ %}
{% set contents = blog_recent_posts(blog, 6 ) %}
{% elif module.layout_choice.select_layout ==‘compact’ %}
{% set contents = blog_recent_posts(blog, 5 ) %}
{% endif %}

{% macro related_posts(post, count, total) %}
{% if count == 1 %}

{% if module.custom_id.enable_custom_id || module.animation.enable %}
<div {% if module.custom_id.enable_custom_id %} id=“{{ module.custom_id.id_name }}” {% endif %} {% if module.animation.enable %} class=“aos-container”{% endif %}>
{% endif %}
<div class=“mwb-blog-related-posts {% if module.animation.enable %} aos--active {% endif %}” {% if module.animation.enable %} data-aos=“{{ module.animation.animation.type }}” data-aos-easing=“{{ module.animation.animation.effect }}” data-aos-duration=“{{ module.animation.animation.duration }}”{% endif %}>
<div class=“content-wrapper”>
<div class=“mwb-blog-related-posts__head”>
<h5 class=“mwb-tc__mini-title”>
{{ module.section_head.mini_title }}
</h5>
<h2>
{{ module.section_head.section_title }}
</h2>
</div>
<div class=“mwb-blog-related-posts__row {{ columnCountDesktop }} {{ columnCountTablet }} {{ layoutChoice }} “>
{% endif %}
{% if module.layout_choice.select_layout !=‘card_without_image’ %}
<div class=“mwb-blog-related-posts__column”>
<div class=“mwb-blog-related-posts__img”>
<a href=”{{ post.absolute_url }}” aria-label=“{% if post.featured_image_alt_text %} Featured image: {{ post.featured_image_alt_text }} - {% endif %}Read full post: {{ post.name }}”>
<img src=“{{ post.featured_image }}” loading=“lazy” width=“352” alt=“{{ post.featured_image_alt_text }}”>
</a>
</div>
<div class=“mwb-blog-related-posts__content”>
<div class=“mwb-blog-related-posts__author”>
<div class=“mwb-blog-related-posts__author-detail”>
<span class=“mwb-blog-related-posts__blog–date”>
{{ datetimeformat(post.publish_date_local_time, ‘%e %B %Y’) }}
</span>
<span class=“mwb-blog-related-posts__author–name”>
BY <a href=“{{ blog_author_url(group.id, post.blog_post_author.slug) }}”>{{ post.blog_post_author.display_name }}</a>
</span>
</div>
</div>
<h5 class=“mwb-blog-related-posts__title”>
<a href=“{{ post.absolute_url }}”>{{ post.name }}</a>
</h5>
</div>
</div>
{% elif module.layout_choice.select_layout ==‘card_without_image’ %}
<div class=“mwb-blog-related-posts__column”>
<div class=“mwb-blog-related-posts__content”>
<h5 class=“mwb-blog-related-posts__title”>
<a href=“{{ post.absolute_url }}”>{{ post.name }}</a>
</h5>
<div class=“mwb-blog-related-posts__author”>
<div class=“mwb-blog-related-posts__author-detail”>
<span class=“mwb-blog-related-posts__blog–date”>
{{ datetimeformat(post.publish_date_local_time, ‘%e %B %Y’) }}
</span>
<span class=“mwb-blog-related-posts__author–name”>
BY <a href=“{{ blog_author_url(group.id, post.blog_post_author.slug) }}”>{{ post.blog_post_author.display_name }}</a>
</span>
</div>
</div>
</div>
</div>
{% endif %}
{% if count == total %}
</div>
</div>

</div>

{% if module.custom_id.enable_custom_id || module.animation.enable %}
</div>
{% endif %}

{% endif %}
{% endmacro %}

{% if module.layout_choice.select_layout ==‘card’ %}

{% related_blog_posts
limit=3,
no_wrapper=True,
post_formatter=“related_posts”
%}

{% elif module.layout_choice.select_layout ==‘card_without_image’ %}

{% related_blog_posts
limit=3,
no_wrapper=True,
post_formatter=“related_posts”
%}

{% elif module.layout_choice.select_layout ==‘compact’ %}

{% related_blog_posts
limit=5,
no_wrapper=True,
post_formatter=“related_posts”
%}

{% endif %}

{% require_css %}
<style>
{% scope_css %}

.mwb-blog-related-posts__content-card .mwb-blog-related-posts__column {
background: rgba({{ module.style.content_card.hyphen_color.color|convert_rgb }},{{ module.style.content_card.hyphen_color.opacity/100 }});
}

.mwb-blog-related-posts__img a:after {
background: linear-gradient({{ module.style.image_gradient.angle }}deg, rgba({{ module.style.image_gradient.first_color.color|convert_rgb }},{{ module.style.image_gradient.first_color.opacity/100 }}) {{ module.style.image_gradient.to }}%, rgba({{ module.style.image_gradient.second_color.color|convert_rgb }},{{ module.style.image_gradient.second_color.opacity/100 }}) {{ module.style.image_gradient.from }}%);
}

.mwb-blog-related-posts__author-detail:before {
background: rgba({{ module.style.hyphen_color.hyphen_color.color|convert_rgb }},{{ module.style.hyphen_color.hyphen_color.opacity/100 }});
}

.mwb-blog-related-posts__card .mwb-blog-related-posts__column,
.mwb-blog-related-posts__content-card .mwb-blog-related-posts__column {
margin-bottom: {{ module.style.posts_bottom_spacing.bottom_spacing_mobile_ ~ ‘px’ }};
}

{% if module.style.overwrite_content_styles %}
.mwb-blog-related-posts__title a,
.mwb-blog-related-posts__author-detail span,
.mwb-blog-related-posts__author-detail a {
color: rgba({{ module.style.content_styling.color.color|convert_rgb }},{{ module.style.content_styling.color.opacity/100 }});
}

.mwb-blog-related-posts__title a {
font-size: {{ module.style.content_styling.title_font_size.mobile.font_size ~ ‘px’ }};
line-height: {{ module.style.content_styling.title_font_size.mobile.line_height ~ ‘px’ }};
}

.mwb-blog-related-posts__author-detail span,
.mwb-blog-related-posts__author-detail a {
font-size: {{ module.style.content_styling.sub_text_font_size.mobile.font_size ~ ‘px’ }};
line-height: {{ module.style.content_styling.sub_text_font_size.mobile.line_height ~ ‘px’ }};
}

{% endif %}

@media only screen and (min-width: 768px) {
.mwb-blog-related-posts__card .mwb-blog-related-posts__column,
.mwb-blog-related-posts__content-card .mwb-blog-related-posts__column {
margin-bottom: {{ module.style.posts_bottom_spacing.bottom_spacing_tablet_ ~ ‘px’ }};
}

{% if module.style.overwrite_content_styles %}

.mwb-blog-related-posts__title a {
font-size: {{ module.style.content_styling.title_font_size.tablet.font_size ~ ‘px’ }};
line-height: {{ module.style.content_styling.title_font_size.tablet.line_height ~ ‘px’ }};
}

.mwb-blog-related-posts__author-detail span,
.mwb-blog-related-posts__author-detail a {
font-size: {{ module.style.content_styling.sub_text_font_size.tablet.font_size ~ ‘px’ }};
line-height: {{ module.style.content_styling.sub_text_font_size.tablet.line_height ~ ‘px’ }};
}

{% endif %}

}

@media only screen and (min-width: 992px) {
.mwb-blog-related-posts__card .mwb-blog-related-posts__column,
.mwb-blog-related-posts__content-card .mwb-blog-related-posts__column {
margin-bottom: {{ module.style.posts_bottom_spacing.bottom_spacing_desktop_ ~ ‘px’ }};
}

{% if module.style.overwrite_content_styles %}

.mwb-blog-related-posts__title a {
font-size: {{ module.style.content_styling.title_font_size.desktop.font_size ~ ‘px’ }};
line-height: {{ module.style.content_styling.title_font_size.desktop.line_height ~ ‘px’ }};
}

.mwb-blog-related-posts__author-detail span,
.mwb-blog-related-posts__author-detail a {
font-size: {{ module.style.content_styling.sub_text_font_size.desktop.font_size ~ ‘px’ }};
line-height: {{ module.style.content_styling.sub_text_font_size.desktop.line_height ~ ‘px’ }};
}

{% endif %}

}

@media only screen and (min-width: 1366px) {

.mwb-blog-related-posts__compact .mwb-blog-related-posts__column:not(:first-child) .mwb-blog-related-posts__img img {
height: 250px;
object-fit: cover;
}

.mwb-blog-related-posts__compact .mwb-blog-related-posts__column:first-child .mwb-blog-related-posts__img img {
height: 520px;
object-fit: cover;
}
}

{% end_scope_css %}
</style>
{% end_require_css %}

2

Hi, @MSaliba5 :waving_hand: Do you have any links to the pages that:

  • work as expected?
  • don’t work as expected?

Sometimes seeing the issue in action helps the community understand the issue.

Best,

Jaycee

3

Hi @MSaliba5 the links @Jaycee_Lewis requested would be helpful.

I didn’t read every line of code, but my guess is that however you have defined “related” is limiting the availability of articles on the posts that only have 2, whereas the posts with 3 have more blogs that meet the criteria.