Adding classes to active filters

Hi,
I’m having some difficulty with something pretty simple in my opinion, but I’m probably missing something quite basic. Following the recipe Filter collections by tags, I created a menu to filter a collection of projects. I am trying to add an “active” class to the menu item when selected, but I guess isActive() and isOpen() are not the right way. Would appreciate any help. Thanks

Controller:

return function($page) {

  // fetch the basic set of pages
  $projects = $page->children()->listed();

  // fetch all categories
  $category = $projects->pluck('category', ',', true);

  // add the category filter
  if($category = param('category')) {
    $projects = $projects->filterBy('category', $category, ',');
  }

  return compact('projects', 'category');

};

And then:

$categories = $site->find('works')->children()->listed()->pluck('category', ',', true);
sort($categories);
?>
<ul>
  <?php foreach($categories as $category): ?>
  <li //Add the active class here>
    <a href="<?= url('works', ['params' => ['category' => $category]]) ?>">
      <?= html($category) ?>
    </a>
  </li>
  <?php endforeach ?>

This should work:

  <li class="<?= param('category') == $category ? 'active' : '' ?>">
    <a href="<?= url('works', ['params' => ['category' => $category]]) ?>">
      <?= html($category) ?>
    </a>
  </li>

Worked like a charm :wink: Thanks for the super fast reply!

1 Like

I also want to add a css class to an active filter. But my filter works a little bit different, because I built it like in this video:

So my url is like this:

projekte?filter=Theater

How can I tell Kirby if the part after the = in the url is the same as the filter menu option, it should print something?

My controller:

return function($site) {

    $filterBy = get('filter');

    $projects = $site
    ->find('Projekte')
    ->children()
    ->listed()
    ->when($filterBy, function($filterBy) { 
        return $this->filterBy('category', $filterBy); 
    })
    ->shuffle();

    return [
        'filterBy' => $filterBy,
        'projects' => $projects
    ];
};

My template:

<div class="cat-list">
    <a class="cat-button" href="<?= $page->url() ?>">Alle</a>
    <?php foreach ($site->find('Projekte')->category()->split() as $category): ?>
        <a class="cat-button" href="<?= $page->url() ?>?filter=<?= $category ?>"><?= $category ?></a>
    <?php endforeach ?>
</div>

The css class "active" should be added to the <a>

Thank you.

Like this, using get() instead of param()

 <a class="cat-button<?= get('filter') == $category ? ' active' : '' ?>" href="<?= $page->url() ?>?filter=<?= $category ?>"><?= $category ?></a>
    <?php endforeach ?>
</div>
1 Like

Ah nice! Kirby is so easy when you know how it works :sweat_smile: