If there is no related posts, don't show title

Help
1

Hey there, how are you doing?

I’m trying to create a section to display related posts, but if there is no related posts, it should not print the H1 on screen. The H1 is out of the loop area and I’m having difficulty to don’t show it if the number of related is 0;

This is the code:

<section class="related-posts">
    <div class="box-container">
        {% if isHeaderDisplayed != false %}
        <h1 class="related-title">
            {% if site.lang == "en" %}
            Related Posts
            {% else %}
            Posts Relacionados
            {% endif %}
        </h1>
        {% endif %}
        <ul class="related-wrap">
            {% assign maxRelated = 3 %}
            {% assign minCommonTags = 1 %}
            {% assign maxRelatedCounter = 0 %}
            {% for post in site.posts %}
            {% assign sameTagCount = 0 %}
            {% for category in post.categories %}
            {% if post.url != page.url %}
            {% if page.categories contains category %}
            {% assign sameTagCount = sameTagCount | plus: 1 %}
            {% endif %}
            {% endif %}
            {% endfor %}
            {% if sameTagCount >= minCommonTags %}

            <li class="related-card">
                <a href="{{ site.baseurl }}{{ post.url }}">

                    <img src="{{ post.img_featured }}" width="330" height="257" class="related-image">
                    <div class="related-card-title-wrap">
                        <span class="related-post-category">
                            {% case post.categories.first %}
                            {% when 'seguranca' %}Segurança
                            {% else %}
                            {{ post.categories.first}}
                            {% endcase %}
                        </span>
                        <h2 class="related-post-title">{{ post.title }}</h2>
                    </div>
                </a>
            </li>
            {% assign maxRelatedCounter=maxRelatedCounter | plus: 1 %}
            {% if maxRelatedCounter>= maxRelated %}
            {% break %}
            {% endif %}
            {% if maxRelatedCounter <= maxRelated %} {% assign isHeaderDisplayed=false%} {% endif %} {% endif %} {%
                endfor %} </ul>
    </div>
</section>

What I tried is to set a variable isHeaderDisplayed and if its true, the H1 would show, if not…

But it is not working

2

Hi, I am doing okay. How are things there?

Glad to see a question I can help with.

The first issue is the outer part of ordering.

You want to set a heading first. And then produce content underneath it and if there is no content it is too late because you already made the heading.

One approach would be making an array without displaying.

You can’t make an empty array in Jekyll liquid but you can set on the page frontmatter.

---
filtered_posts: []
---

Then you have your for loop or your case 2 for loops. And on the inside you use a push filter to add an item to the array.

Then you can check like

{% if page.filtered_posts.size != 0 %}

And then put both your heading and your posts (with another for loop) within that.

3

A more elegant solution than making an empty array and appending to it would be to use where or where_expr Jekyll filters to go from say 100 items in an array to 50 or 4 or 0 items.

And then check the size of the array as above.

The problem is that map doesn’t work well when you have two for loops.

4

I’m fine, thanks for asking.

I’ve tried setting the empy array on the page frontmatter, but was not successfull.

I should use it instead of the maxRelatedCounter, right?

What I did was push an item to the array and check if its length was == 0, if its true, it should not print the title, but it didnt work

5

Yeah you don’t need the counter. You will loop through and adding to the array and then get its size, so no counter needed.

The tricky thing is when you append to an array it isn’t persisted.

So you must overwrite. Try this out on a new page and a demo and then add it to your existing page.

For example using a string and then some urls on pages.

---
my_array: []
---

{% assign my_array = my_array | push: 'my value ' %}

{{ my_array | inspect }}

{% for p in site.pages %}
{% my_array = my_array | push: p.url
{% endfor %}

{{ my_array | inspect }}