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

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">{{ | 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'); }); 

Like this:

Like Loading…

Leave a Reply