Step 1 - Add content
The first thing we need to do is to add some more project pages to the Starterkit. Out of the box, it contains only 3 project pages, but if we want to see a nice filter animation on our page, we should add 2 or 3 (or more...). For the tutorial, we will just copy the 3 existing projects and change their title. You should now have something like this in your
Step 2 - Create a controller
We'll reuse code from the filter by tag tutorial.
We could put all our code in the php snippet here, but using a controller to keep the logic out of the display is a good habit.
Let's create the folders controllers in your site folder.
What every line does is explained in the code snippet. For more details, visit this Kirby blog post.
This controller will return all the tags used on projects as well as the list of projects.
In case you've never seen a controller before, there's handy documentation available in the Kirby docs we highly recommend reading.
Step 3 - The buttons
We need to modify the starterkit snippet projects.php located in
We're going to create a list of tags and display them as buttons (but not on the home page). The "buttons" will permit filtering dynamically the list based on the tag selected.
Here we use span to list our tags but you can also use div or button tags, whichever you prefer.
We will need to add some HTML attributes to make them work.
buttons-filter class is used to apply styling while the
filter class is used by the Mixitup plug-in.
The data-filter attribute will contain each projects' tags.
Step 4 - The modified project list
We need to modify a bit the original list from the projects.php snippet.
<ul class="<?php e($page->isHomepage(), 'teaser', 'teaser-filter')?> cf">
We're using a different class for the list on the homepage and on the projects page. Here
e(), the shorthand for
ecco(), let's us echo a different value depending on the outcome of the first parameter: is this the homepage?
mix class is used by the Mixitup plugin.
<?php foreach($project->tags()->split(',') as $tag): ?><?php echo str::slug($tag) ?> <?php endforeach ?> is used to add all the projects' tags as classes. This way, each button's data-filter will link to projects with the same class.
The complete snippet
That's it for our projects snippet. Let's put it all together. Your snippet should look like this.
Step 5 - Add JQuery and Mixitup JS
As we said above, you can download both JQuery and Mixitup plugins to add them to your website, or use them directly from their CDN. We use the CDN in our tutorial, and it happens in the footer.php snippet.
Notice we're using Kirby's built-in JS helper to load both files.
Learn more about Mixitup options
Final step - Add some css
We use some very simple styling in this tutorial to get you started.
You can now show your subpages with a very clean MASONRY styled grid based on the native Kirby tags. In this demo, tags with accents and spaces will be converted to html safe strings thanks to
str::slug. We always do this for the French Kirby users ;-)
If you wish to add some suggestions, see an error, or just want to say hello, please feel free to use the comments below.
Download the full tutorial