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 }}