Answers.Body: <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>
  
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2020-05-21T15:32:11.227Z
Answers.Text: 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.
Answers.UserDisplayName: Justin Kendall
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2020-05-21T14:48:29.963Z
Answers.LastActivityDate: 2020-05-21T14:48:29.963Z
Answers.UserDisplayName: James Smith
Body: <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>
  
Tags: <craft3><categories><filter>
Title: How to create a category filter for a portfolio site?
ThreadText: # 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() %}
  
  <div class="categories-wrapper">
     {# Display the navigation #}
     {% nav category in categories %}
        <a href="{{ category.url }}"><h3>{{ category.title }}</h3></a>
     {% endnav %}
  </div>
  
  ```
  
  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"> 
         </div>
         <h3 class="project-title">{{ entry.title }}</h3>
         <p class="project-category"> Category </p>
     </a>
  </div>
  {%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.  
  
  ---
  
  