Dynamic Views Using Isotopes... For Humans

Dynamic Views Using Isotopes... For Humans

Isotopes are a very cool way to show your information in a dynamic view. A great example of this is on our company page. To do this on Drupal I have narrowed it down to 3 steps.

Step 1: Add the isotope Library

(Please note that it is for personal use and can be licensed. Here is the licencing information: http://isotope.metafizzy.co/docs/license.html)

  • ​Isotope Library can be found on this page: http://isotope.metafizzy.co

  • After the download put it into [your-site]/libraries/jquery.isotope so the path would read [your-site]/libraries/jquery.isotope/jquery.isotope.min.js.

Step 2: Enable the modules required

Step 3: Set up and theme your view

  • Create your View using the "Isotope Grid" type that was enabled when you installed the views_isotope module:

Isotope Grid

  •  If you have everything right at this point you can save your view and you should be able to see the elements in your grid resize as you change the size of your browser. If you want to click on an element to expand the view and see more information of that element (like our company page). There is some javascript involved:

Isotope

  • Check your view to make sure the large class is being added to the isotope-element. When it is, then you can theme your view however you want!

The views_isotope module also comes with views filters. These only function as links, so when you click on the link it will filter dynamically for your view. Isotope allows for filtering by using classes attached to the isotope-element classes. All you have to do is call the function to filter and it will hide all of the isotope-elements that do not have that class. The javascript below takes what has been selected by the control and calls the isotope filter including the .your-class-filter otherwise don't filter, or just get everything (Using "*"):

         $('.program-filters .Genres').change( function() {
           if($(this).val()!=0){ 
            $('.view-programs .view-content #isotope-container').isotope({filter: "." + $(this).val()});
           }else{
             $('.view-programs .view-content #isotope-container').isotope({filter: "*"});
           }
         });