isotope-filter.png

This module allows you to easily create a grid View that uses the amazing Isotope JQuery Library to dynamically filter the elements displayed.

"Beardcast" #1: Using Views Isotope w/ a Full Beard
Kiwi Translation: Configuring Views Isotope

IMPORTANT: The Isotope library is NOT GPL.  It may be used in non-commercial and personal applications for free, but commercial use requires a $25 licences.  You can find more details http://isotope.metafizzy.co/docs/license.html

The way the sort and filtering are configured is different than @funkym's D6 module. Instead of configuring that in the View settings for the Isotope Grid, we configure the fields to filter by adding a class of isotope-filter in the View Style Settings. An additional View using the Isotope Filter Block View Style is required to make the Isotope function. Using blocks for the filter and sort made sense to us since in our layout we wanted the filter UI in a different region than the View.

The most common configuration is likely using taxonomy terms as the filter. An example Feature is included that displays Article nodes and filters them by the tags taxonomy. In the example feature, the filter block has been added to the header of the View.

This module was developed with support from Pearson and the National Association of Realtors.

You can see an example of the module is use at code.pearson.com and partner.pearson.com.

Related Modules:
Views Fluid Grid - jQuery Masonry
@GregAdams sandbox of D7 version that implements multiple layouts
@funkym's sandbox of D6 version (large parts reused)

Project Information

Downloads