How to filter Categories by Isotope?

Kirby 2 Questions 🤔
1

Hi all,

i use the isotope plugin ( http://isotope.metafizzy.co/ ) to filter projects by a category on my page.
I don´t find the right solution to split categories in a category without a nested foreach loop.

here a example code to understand:

<div class="main">
	<?php foreach(page('projects')->children()->visible() as $project): ?>
		<?php foreach($page->categories()->split() as $category): 
		
			if ($category == "birds")
			   {
			   echo '<div class="col-md-12 birds" data-category="birds">';
			   }
			else if($category == "cats")
			   {
			  echo '<div class="col-md-12 cats" data-category="cats">';
			   }
			else
			   {
			   echo '<div class="col-md-12 *" data-category="*">';
			   }

			<?php if($image = $project->images()->sortBy('sort', 'asc')->first()): ?>
				<img src="<?php echo $image->url() ?>" alt="<?php echo $project->title()->html() ?>">
					<a href="<?php echo $project->url() ?>">
						<h3><?php echo $project->title()->html() ?></h3>
					</a>
	     	<?php endif ?>
	    <?php endforeach ?>
	<?php endforeach ?>
</div>

is there anyone who can help or worked with the isotope plugin in kirby?

2

I think the problem here is that each article needs all the classes or data filters in the div. So what you need to do, is have the second foreach loop within the div, not create a new div for each category:

<?php
$projects = page('projects')->children()->visible();
<div class="main">
  <?php foreach($projects as $project): ?>
    <?php $categories = str_replace(',', ' ', $page->categories()) ?>		
      <div class="col-md-12 <?php if($categories) {
        echo $categories;
     } else { echo '*'; } ?>">

  <?php if($image = $project->images()->sortBy('sort', 'asc')->first()): ?>
	<img src="<?php echo $image->url() ?>" alt="<?php echo $project->title()->html() ?>">
	<a href="<?php echo $project->url() ?>">
	  <h3><?php echo $project->title()->html() ?></h3>
	</a>
   <?php endif ?>
	  
  <?php endforeach ?>
</div>

You can repeat that for the data-category, but I don’t think you need both the classes and the data attribute.

Edit: I edited the code above.

3

Thanks for fast help! :slightly_smiling:

Why do you split by image tags?

for explanation: in my project.php i defined in the blueprints as options, checkbox fields like “cats”, “dogs” and so on. I want to filter the projects by these categories.

sorry it´s the first time i have worked with kirby and i have not so much experience with php

4

That’s nonsense, of course, the complete line is superflous, I just copied the code and left it there by mistake. I corrected it above.