Query Loop hide if empty?

It doesn’t appear to be possible, but is it possible to show/hide a Query Loop depending on if the loop is empty? I have a query loop for “trending posts” at the top of my archive pages, showing 3 posts tagged “trending” (a manual system for promoting some posts). However not all archive pages have posts marked “trending,” and it would be nice to be able to show the container/query loop only if it’s populated (would be great to only show if there are at least 3 posts, but empty/not empty would do). Is this possible via a function, etc?

Hi @Kip,

Is it taking up any space when empty? If so, we can do it through custom CSS. Try adding this through Appearance > Customize > Additional CSS:

.gb-query-loop-wrapper:empty{
    display:none !important;
}

Thanks. Actually the query loop does collapse if it’s empty. What I was hoping to do was add a headline to the loop - a single headline above a grid of 3 posts in a grid. I set it up like this:


but the headline is created outside the query loop, so even when the loop is empty, the headline stays

I was hoping to be able to show the loop/grid/headline if there was content, and hide the headline if not.

You can try placing the Headline Block after the Query loop block. Then, give it a class of show-if-query-is-empty.

The CSS for such a structure would be something like this:

.gb-query-loop-wrapper:is(:empty) + .gb-headline.show-if-query-is-empty {
    display: block;
}

.gb-query-loop-wrapper + .gb-headline.show-if-query-is-empty {
    display: none;
}

This would only show the GB Headline Block if the Query Loop above it has content.

1 Like

I’m afraid I haven’t been able to get this to work. I added the class to the headline, made sure it was within the query loop, and tried every variation of the css I could, but could not get it working. Not the end of the world :slight_smile:

I see. If you can share the link to the site where we can see this loop, I can take a quick look at it.

We just launched our new theme and I’m working through some details. I will get back to you by tomorrow with links to where the issue is :slight_smile:

Actually, I have the block implemented now. I have a query loop block set to display in all Archives pages, using the code supplied previously to filter the loop by category and tag (slug->‘hero’). There are tags in place at How-To - OnMSFT.com - but not at Surface - OnMSFT.com. As you can see, even though I have the block built as above, with the Headline below the query tag, if the query loop is empty, the headline still shows. I have
.gb-query-loop-wrapper:empty{
display:none !important;
}
in Customizer (for now), but it does not have any effect and the other css you provided did not work for me.
Thanks again, really appreciate the help.
kip

Can you add show-if-query-is-empty to the class list of the Headline Block so I can quickly see it?

done and cleared the caches, you should be good.

Try changing the code to this:

.gb-query-loop-wrapper:is(:empty) + .gb-headline.show-if-query-is-empty {
    display: none;
}

.gb-query-loop-wrapper + .gb-headline.show-if-query-is-empty {
    display: block;
}

Then, place the Headline Block under the Query loop.

You can reverse their position through CSS as well:

.gb-container.gb-container-d8f94efd .gb-inside-container {
    display:flex;
    flex-direction: column-reverse;
}

In this CSS, I used the automatically generated class gb-container-d8f94efd, but you can use a custom class again for this.

Hey thanks for this - I still couldn’t get it to work, but went a different way (added a “Trending” button to the query loop items). Not sure why it isn’t working for me, I have something set up wrong, but not a big deal as I said. Appreciate the help you can close this ticket :slight_smile:

I see. You’re welcome @Kip!