Filter Menu with active classes

Kirby 3 Solved ✅
1

I’m trying to make a news list with a filter menu and active classes.
I’ve followed the tutorial here. I can change the URL the buttons and show the tags in the posts but I can not get the filter to work or incorporate the active class.

Code:

  <?php 
    $filterBy = get('filter');
    
    $posts = $page
      ->children()
      ->listed()
      ->when($filterBy, function($filterBy){
        return $this->filterBy('category', $filterBy);
      })
  ?>


  <main>
    <a href="<?= $site->url() ?>" aria-label="click to close" class="button-close md button"><?= $site->closeText() ?></a>
    <section class="main-content">

      <h1 class="xxxl h1 ta-center"><?= $page->title() ?></h1>

      <ul class="filter">
        <li><a href="<?= $page->url() ?>" arial-label="show All news" class="md <?= param('category') === null ? 'class="active"' : '' ?>">All</a></li>
        <li><a href="<?= $page->url() ?>?filter=Updates" arial-label="filter the list showing just news with Updates tags" class="md <?= param('category') === true ? 'class="active"' : '' ?>">Updates</a></li>
        <li><a href="<?= $page->url() ?>?filter=Process" arial-label="filter the list showing just news with Process tags" class="md <?= param('category') === true ? 'class="active"' : '' ?>">Process</a></li>
        <li><a href="<?= $page->url() ?>?filter=Press" arial-label="filter the list showing just news with Press tags" class="md <?= param('category') === true ? 'class="active"' : '' ?>">Press</a></li>
        <li><a href="<?= $page->url() ?>?filter=AsGaeilge" arial-label="filter the list showing just news with As Gaeilge tags" class="md <?= param('category') === true ? 'class="active"' : '' ?>">As Gaeilge</a></li>
      </ul>

      <?php
      $posts = $page->children()->listed()->sortBy(function ($page) {
        return $page->published()->toDate();
      }, 'desc');

      foreach($posts as $post): ?>
      <div class="card-news">
        <a href="<?= $post->url() ?>" arial-label="Click to read more about <?= $post->title()->html() ?>">
          <?php if($image = $post->cover()->toFile()): ?>
          <figure>
            <img src="<?= $image->url() ?>" alt="<?= $image->alt() ?>">
          </figure>
          <?php endif ?>
           <time class="sm date-time"><?= $post->published()->toDate('jS F Y') ?></time>
          <h2 class="lg"><?= $post->title()->html() ?></h2>
          <p><?= $post->postContent()->toBlocks()->excerpt(250) ?></p>
          <?php foreach ($post->category() as $category): ?>
            <span class="tag sm"><?= $category ?></span>
          <?php endforeach ?>
        </a>
      </div>
      <?php endforeach ?>

    </section>
  </main>

and my blueprint:

right:
        width: 1/3
        sections:
          postSection:
            type: fields
            fields:
              cover:
                label: Cover
                type: files
                layout: cards
                template: image
                image:
                  ratio: 4/3
                  cover: true
                max: 1
              category:
                label: Category
                type: select
                required: true
                options:
                  - Updates
                  - Process
                  - Press
                  - As Gaeilge
                help: Tag the post as Updates, Process, Press or As Gaeilge
                max: 1
                translate: false
              published:
                label: Published on
                type: date
                display: DD MMMM YYYY
                default: today
                required: true
2

To check the active filter, you are querying the category parameter, whereas your URL is using a query.

Also, Your AsGaeilge filter cannot work because the value saved in the content file has a space.

So much for these issues, but the main reason the filter doesn’t work is because you are redefining your $posts variable after the filter list.

3

How would I solve space in the tag, I’ve tried:

href="<?= url($page->url(), ['params' => ['tag' => urlencode($tag)]]) ?>"

I’ve gotten everything else working, the filtering, active classes etc.

4

If you urlencode() on one side, you urldecode() on the other side, i.e. where you are reading the param

urldecode(param('tag'))