<p>The site you linked to is using <a href="https://isotope.metafizzy.co/" rel="nofollow noreferrer">Isotope</a> 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.</p>

<p>(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).</p>

CC BY-SA 4.0
2020-05-21T15:32:11.227Z
Good to know! I think that will work. I found another question/answer [link] (https://craftcms.stackexchange.com/questions/30637/filter-entries-with-ajax) that helps with this too.
Justin Kendall
CC BY-SA 4.0
2020-05-21T14:48:29.963Z
2020-05-21T14:48:29.963Z
James Smith
<p>I want to create a category filter similar to this website <a href="http://www.mypoorbrain.com/" rel="nofollow noreferrer">http://www.mypoorbrain.com/</a> (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).</p>

<p>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).</p>

<p>Here is the code I have for the category loop (the filter)</p>

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

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

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

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

<p>And here is my current code for the project loop:</p>

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

<p>So how can I accomplish this?</p>

<craft3><categories><filter>
How to create a category filter for a portfolio site?
# How to create a category filter for a portfolio site?

(Asked by: username_0 on 2020-05-21)

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() %}


   {# Display the navigation #}
   {% nav category in categories %}
      {{ category.title }}
   {% endnav %}


And here is my current code for the project loop:
{% set projects = craft.entries.section('projects').all() %}
{% for entry in projects %}

   
      {% set projectImg = entry.featuredImage.one() %}
       
        
       
       {{ entry.title }}
        Category 
   

{%endfor%}

So how can I accomplish this?

**Tags:** craft3, categories, filter


---

## 1 answers

### Answer by username_1 on 2020-05-21. Score: 2 | Accepted answer

The site you linked to is using [Isotope](https://isotope.metafizzy.co/) 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).

> **Comments:**
> **username_0**: Good to know! I think that will work. I found another question/answer [link] (https://craftcms.stackexchange.com/questions/30637/filter-entries-with-ajax) that helps with this too.  

---

