Filter posts based on tag

Developer help Installation
1

I’m trying to remove some posts from my author’s page based on a certain tag

{{#foreach posts}}
    {{#unless tags.some(tag => tag.slug === 'tag-to-filter')}}
        {{#if @first}}
            <div class="mt-7.5 lg:mx-36">
        {{/if}}
        {{> "pages/post/post-overview" class="teaser-cta" metaLinks="false"}}
        {{#if @last}}
            </div>
        {{/if}}
        {{else}}
            <div class="error" >{{{block "no-post"}}}</div>
        {{/unless}}
{{/foreach}}

but this just throws a 400

any idea on what i’m doing wrong? documentations have no examples of this

2

The tags.some... won’t work. Handlebars aren’t really Javascript “wrappers”. So, I assume that’s what leads to the 400 error.

To get the flexibility you want on the author page, I’d use the #get helper. That way you have full control over what’s fetched and what isn’t:

{{#get "posts" limit="all" filter="tag:blog+author:{{author.slug}}"}}
    {{#foreach posts}}
        ...
    {{/foreach}}
{{/get}}
3

Just FYI - removing a post from the author list will lead to wonky pagination counts (e.g. 9 posts on page 1, 10 posts on page 2, 3 posts on page 3).

Check out the {{#has}} helper for this:

e.g. {{^has tag="tag-to-filter"}} (using ^ to invert the filter)

1 Like
4

that’s exactly what happened i now have pages with almost no posts.

this is my code:

{{#foreach (filterPostsByTagSlug posts 'hash-quick-content')}}
                        {{#if @first}}
                            <div class="mt-7.5 lg:mx-36">
                        {{/if}}
                        {{> "pages/post/post-overview" class="teaser-cta" metaLinks="false"}}
                        {{#if @last}}
                            </div>
                        {{/if}}
                        {{else}}
                            <div class="error" >{{{block "no-post"}}}</div>
                    {{/foreach}}

and the helper:

/**
 * 
 * Helper that filters out posts with a certain tag from the list
 * 
 * @param {Array} posts 
 * @param {String} slug 
 * @returns {Array}
 */
module.exports = function filterPostsByTagSlug(posts, slug, options) {
  if (!slug) {
    return posts;
  }
  let newPosts = [];
  let found = false;

  for (var post of posts) {
    for (var tag of post.tags) {
      if (tag.slug === slug) {
        found = true;
        break;
      }
    }
    if(!found){
      newPosts.push(post);
    } 
    else{
      found = false;
    }
  }
  return newPosts;
};

I actually wanted an infinity scroll instead of pagination but that’s a whole new topic… i can i fix the pagination here?

5

I think it’ll be easier to hide that pagination is sort of broken using infinite scroll. Just keep getting posts until you have enough rendered …

6

how would i do that?

7

Add infinite scroll? Several of the official (free) themes include it, so you might want to have a look at how they’re doing it.

8

can you tell me where that is?

9

Infinite scroll? Any time you can keep scrolling and scrolling, and more posts load. Headline does it, for example, on the tags pages. Casper does it on pretty much any page.

10

no i mean, where can i see that theme code?

11

Hello!

Or just go to Your ghost Admin Panel → Design & Navigation → Themes down right corner of screen → Download Files

12

thank you very much my good sir