Adding a class to a current filter

Kirby 3 Solved ✅
1

Hey Kirby-Crew! I’m trying to add a class to an active filter. I already tried using this method: Adding classes to active filters but can’t seem to make it work. Here’s my current code.

<?php
	
$filterBy = get('filter');

$projects = $page
	->children()
	->listed()
	->when($filterBy, function($filterBy) {
		return $this->filterBy('category', $filterBy);
	})
	->paginate(20);

$pagination = $projects->pagination();

?>

<div class="main">

	<div class="projects-filter" data-aos="fade-in">
		<a href="<?= $page->url() ?>">All</a>
		<a href="<?= $page->url() ?>?filter=Residential">Residential</a>
		<a href="<?= $page->url() ?>?filter=Commercial">Commercial</a>
		<a href="<?= $page->url() ?>?filter=Professional">Professional</a>
	</div>

	<ul class="projects">
		<?php foreach ($projects as $project): ?>
		<li data-aos="fade-in">
			<a href="<?= $project->url() ?>">
				<div class="border-bottom">
					<?php if ( $image = $project->images()->sortBy('sort')->first() ) {
						echo $image->crop(600,800);
					} ?>
				</div>
				<div class="projects-info">
					<div><?= $project->title() ?></div>
					<div class="text-right"><?= $project->subtitle() ?></div>
				</div>
			</a>
		</li>
		<?php endforeach ?>
	</ul>

</div>

Any and all help is highly appreciated! Thanks, W.

2 
<div class="projects-filter" data-aos="fade-in">
		<a href="<?= $page->url() ?>">All</a>
		<a class="<?= $filterBy === 'Residential' ? 'active' : '' ?>" href="<?= $page->url() ?>?filter=Residential">Residential</a>
		<a href="<?= $page->url() ?>?filter=Commercial">Commercial</a>
		<a href="<?= $page->url() ?>?filter=Professional">Professional</a>
	</div>

etc. for the other filters, and for all active would apply when $filterBy is an empty string.

3

Amazing @pixelijn! Worked like a charm. Any idea how to make it work on the “all” part too, when there’s no filter active? Leaving the $filterBy empty doesn’t seem to work… :slight_smile:

4

Try

<?= !isset($filterBy) ? 'active' : '' ?>
5

That works like a charm, yet again! #bestcommunityever Thanks @adamkiss!