Chuck Grimmett

Category Filtering with Isotope in Jekyll

This is the most recent addition to my Jekyll Tools repository on GitHub. Isotope is a popular jQuery filtering and sorting plugin. I combined it with Liquid to generate category filtering in Jekyll.

You can see it in action at http://cagrimmett.com/category-isotope/.

You can find the code for this in my Jekyll Tools repo on GitHub.

This works by using YAML front matter to set categories and then outputting those categories as buttons and class names to work with the Isotope plugin.

Generate the buttons from categories:

 class="button-group filter-button-group"> 	{% for category in site.categories %} 		 class="button" data-filter=".{{ category | first }}">{{ category | first }} 	{% endfor %} 		 class="button active" data-filter="*">All

Generate your posts:

  class="grid"> 	{% for post in site.posts %}       class="element-item {{ post.category }}">          class="post-meta">{{ post.date | date: "%b %-d, %Y" }}          
            class="post-link" href="{{ post.url | prepend: site.baseurl }}">{{ post.title }}         
          
           {{ post.excerpt }}
{% endfor %}

“All” is selected by default. The other buttons come from the category you specify at the top of a post in your YAML front matter.

Include the jQuery and Isotope libraries, then set up the functions to trigger the filtering and setting an “active” class on your buttons so you can highlight the active one:

  
// init Isotope var $grid = $('.grid').isotope({   // options }); // filter items on button click $('.filter-button-group').on( 'click', 'a', function() {   var filterValue = $(this).attr('data-filter');   $grid.isotope({ filter: filterValue }); }); $('.button-group a.button').on('click', function(){ 	$('.button-group a.button').removeClass('active'); 	$(this).addClass('active'); });

Chuck Grimmett

Posted by Chuck Grimmett. Learn more on his About page.

Comments

Leave a Reply

Webmentions

If you've written a response on your own site, you can enter that post's URL to reply with a Webmention.

The only requirement for your mention to be recognized is a link to this post in your post's content. You can update or delete your post and then re-submit the URL in the form to update or remove your response from this page.

Learn more about Webmentions.