Improvements to the experience of filtering posts by tags

The CMS Questions
1

Hello! I’ve been following the video to filter posts by tags:

It’s pretty useful, and I have it working. However, the experience that I got working could be improved. There are a couple of things I didn’t manage to make work:

1) How the link to category doesn’t go back to the top of the page? Ideally, I’d rather prefer to keep the same scroll position.

2) And the other thing, is that there’s an “All categories” item. For the rest of categories, there’s an “active” class applied when they are selected, but I couldn’t make this to do the same.

There’s a code example here that closely resembles the example:

        <nav>
            <a href="<?= $page->url()?>">All</a>
            <?php foreach ($filters as $filter): ?>
                <a href="<?= $page->url() ?>?filter=<?= $filter ?>" class="<?= $filterBy === $filter ? 'active' : '' ?>"><?= $filter ?></a>
            <?php endforeach ?>
        </nav>

Perhaps anyone has already gone through this and solved it?

2

Add the active state on the condition that the filter is not set/empty.

Something like

<?php $filterBy = get('filter') ?>
    <nav class="filter">
      <a href="<?= $page->url() ?>" class="<?= $filterBy === '' ? 'active' : '' ?>>All</a>
      <?php foreach ($filters as $filter): ?>
      <a href="<?= $page->url() ?>?filter=<?= $filter ?>" class="<?= $filterBy === $filter ? 'active' : '' ?>><?= $filter ?></a>
      <?php endforeach ?>
    </nav>
3

Thanks! I will try. Since I don’t have much idea, I used a similar format than the other one, that seems to work, too:

<a href="<?= $page->url()?>" class="<?= $posts === $unfiltered ? 'active' : '' ?>">All</a>

But I’m not really sure in terms of good practices and such. I just based this on the other one. But will try yours as well.

What I have now missing, is this weird scroll behaviour when I click on each filter. That the scrolls resets to the topo. But I’m unsure if this is avoidable.

4

Well, with the anker tags, you are reloading the page when filtering. To keep the scroll position, you probably need a JS based solution, so you can listen to scroll position. That’s not really Kirby related, but frontend stuff.

5

Yes, I understand. It makes sense. Thanks for the suggestion.

6

Is this still true in 2024?

My filter menu is not at the top of the page. When used the page scrolls to the top of the page.

7

This has little to do with 2024, but with the fact that you need to implement the frontend behavior. This is nothing Kirby will ever do automatically for you.

8

Okay, thanks.

So there is no way to filter tagged pages, without changing/reloading the URL?

I’m beginning to wonder if I’d be better using the HTML details and some hardcoding

<details>
  <summary>All</summary>
  <p>Case study 1</p>
  <p>Case study 2</p>
  <p>Case study 3</p>
</details

<details>
  <summary>Design</summary>
  <p>Case study 2</p>
  <p>Case study 3</p>
</details

<details>
  <summary>Photography</summary>
  <p>Case study 3</p>
</details```
9

There are

  • purely JS based filtering
  • Ajax based filtering
  • form with Ajax

Urls with fragment to go to a particular place in the page
Scrollspy based solution in combination with urls

10

Okay, thank you

11

Thinking aloud…

Rather than always scroll to the top of the page, when using the filter, I could put an anchor tag, so the page scrolls to the filter, which is not at the top of the page.

So something like this

<ul id="filter-menu">
	<li><a href="<?= $page->url() ?>#filter-menu">All</a></li>
	<li><a href="<?= $page->url() ?>?filter=branding#filter-menu">Branding</a></li>
	<li><a href="<?= $page->url() ?>?filter=graphicdesign#filter-menu">Graphic design</a></li>
</ul>

I appreciate the scroll position will not be kept and that there will be some scrolling, but it won’t be as much, and no where near as confusing as scrolling to the top of the page.

Like the filter on this page News | Adaptavate

12

That’s what I already suggested above: Urls with fragment to go to a particular place in the page

13

Oh, okay that’s what ‘fragments’ means!