I want to create a category filter similar to this website http://www.mypoorbrain.com/ (just a random website i found with the desired effect). Basically I want the categories to be displayed somewhere (All | Design | Web | Illustration) with the projects below. When a category is clicked, the projects shuffle to display just the projects with that category (not going to a new page).

I've looked through other category questions on here, and can't seem to find exactly how to do it (although I'm still pretty new to Craft, so I might not know what to look for with this).

Here is the code I have for the category loop (the filter)

Note: I have all of the categories I want (except for "All", not sure how to handle that) in the category group "Projects".

{# Create a category query with the 'group' parameter #}
{% set myCategoryQuery = craft.categories()
    .group('projects') %}

{# Fetch the categories #}
{% set categories = myCategoryQuery.all() %}

<div class="categories-wrapper">
   {# Display the navigation #}
   {% nav category in categories %}
      <a href="{{ category.url }}"><h3>{{ category.title }}</h3></a>
   {% endnav %}

And here is my current code for the project loop:

{% set projects = craft.entries.section('projects').all() %}
{% for entry in projects %}
<div class="project-thumbnail-wrapper bg-darkBlue">
   <a href="{{ entry.getUrl() }}">
      {% set projectImg = entry.featuredImage.one() %}
       <img src="{{ projectImg.getUrl() }}" class="thumbnail">
       <div class="overlay bg-orange"> 
       <h3 class="project-title">{{ entry.title }}</h3>
       <p class="project-category"> Category </p>

So how can I accomplish this?


The site you linked to is using Isotope to achieve this effect. Isotope is simply a JavaScript filtering library - it's all front-end so really this has nothing to do with Craft, unless you want to load entries dynamically via AJAX.

(Most Isotope implementations I've seen simply load everything and then hide/show the relevant ones when clicking on filters... It depends how many items you have as to whether it's worth loading them in dynamically, but it's a lot simpler to load everything in one go).


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.