Hướng dẫn sử dụng Drupal Views and Isotope

When I was trying to decide how I would lay out my "Recent Work" section for this site, I was intrigued by a style called masonry. The masonry-style layout has been around for quite some time, but was made popular by the social pinning site, Pinterest. If you're not familiar with Pinterest, it's definitely worth checking out.

With varying sizes of website home pages and other design pieces, I decided to go with the same "building block" approach, using a jQuery plugin called Isotope. Unfortunately, I needed to make it work with Drupal, the content management system in place for the site. (More on Drupal as a CMS in later posts!) With the Views module in place, I set out to leverage Drupal and Isotope together!

Setting Up Views

I'll assume that, if you're here for the tutorial, you already know how to set up a Drupal site, add the Views module, and create a view. So I'll skip ahead to setting up the view.

I like to use fields as the format for my views. It gives me better control than using teasers or anything else. Then I add all the fields I want to have represented. In my case, I want to show the thumbnail of my image, the project title (to be revealed when hovered over), the type of work I'm showing, and an edit link for quick modifications. I've also filtered my view and sorted by date. From the default view, I created a block that was placed on the "Recent Work" page.

Click the image below to see my setup:

Setting Up Isotope

I was hoping there would be a module that would take care of this for me, but alas I struck out. (NOTE: There is a Views Isotope module currently under development, but I didn't want to rely on an incomplete project.) So to add Isotope's masonry building functionality, I simply added the "jquery.isotope.min.js" file to my theme's .info file. The file can be downloaded from the Desandro Git Repository.

.INFO

scripts[] = js/jquery.isotope.min.js

CSS for the Drupal View

The Isotope plugin requires very little in the way of CSS, but asks that the items to be arranged by Isotope already be floated left. I've added a bit of extra styling to the row and the image inside to give it a bit extra. Note that I've set padding on the image and a white background on the views row to create a white pseudo-border around the image.

CSS

#block-views-work-listing-block-1 .views-row {
float: left;
background: #fff;
margin: 10px;
width: 170px;
-moz-box-shadow: 0px 0px 5px #aaa;
-webkit-box-shadow: 0px 0px 5px #aaa;
box-shadow: 0px 0px 5px #aaa;
}

#block-views-work-listing-block-1 .views-row img {
padding: 10px 10px 8px;
}

At this point, you will have a page that looks similar to the image below. Next we'll get Isotope closing the gaps!

Integrating Isotope with Views Rows

This part was actually quite easy! In your theme's .js file, simply add the script below. I've used my Views block ID as the container selector (viewCont), but make sure to replace the selector with your Views block's ID. Isotope handles the rest!

JAVASCRIPT

var viewCont = $('#block-views-work-listing-block-1');
viewCont.isotope({
  // options
  itemSelector : '.views-row'
});

There are also tons of other options you can specify. For a full list, visit the Isotope plugin website.

You should now have a masonry-style layout that is completely dynamic. Simply add new content to your Drupal site and Isotope will handle the layout!

Wrap Up

Isotope also handles filtering of content, but requires that you specify a CSS class to filter. Because views rows all have the same classes, I wrote a bit of my own jQuery to add category classes to each row. I may write a separate article about filtering Views rows using Isotope, but that is beyond the scope of this tutorial.

If this tutorial helped you figure out the masonry style layout with Views rows, let me know in the comments below! If you have any questions, feel free to leave them in the comments below as well!