Instant jQuery Masonry How-to

Integrating with Drupal (Advanced)

Luckily, with Drupal, integrating Masonry is relatively painless and easy to do. With the help of a couple of contributed Drupal modules, we can have Masonry installed in no time without having to write a single line of custom code.

Getting ready

As with WordPress, we need a local or server installation of Drupal 7. At the time of writing this book, the version of Drupal used was Drupal 7.20, with the default Bartik theme. We need to download five modules: cTools, Libraries, jQuery Update, Masonry, and Views. We also need to download the Masonry plugin, and if we need demo content, we can download the Devel module. Once the modules are downloaded, place them in the /sites/all/modules directory.

Note

At the time of writing, the current versions of the modules were as follows:

cTools – 7.x-1.2
Libraries – 7.x-2.0
jQuery Update – 7.x-2.3
Masonry – 7.x-1.1
Views – 7.x-3.5

After downloading, we will enable all of these modules, including the submodules Views UI and Masonry Views, and set jQuery Update to Version 1.7. Libraries and Masonry directories will not have been created yet, so create a folder named libraries in /sites/all, and then create a folder named masonry inside /sites/all/libraries. We will put the Masonry plugin in the /sites/all/libraries/masonry directory. Also, create some demo articles using Devel if no other content is available.

How to do it...

We will start by creating a new view, located in the administration menu, by going to Admin | Structure | Views.
Click on Add new view.
Name it Masonry.
Set the entity to be shown to Content and set the type to Article, as shown in the following screenshot.
Leave all other settings as default.
In the Format section of the Views user interface, set the format to utilize grids and leave all the default options for now, as shown in the next screenshot. Click on Apply (all displays).

How it works...

The Masonry module is essentially a Views plugin with Masonry built in. Views is a query builder that posts content in a container based on the provided settings. This makes it easy to set up a page or view with Masonry while having the ability to change the settings through a GUI. If we go back and look at the Masonry grid settings, we can see that we can select or deselect Masonry options such as turning on animations and adding extra gutter space.

We needed the other modules as Masonry is dependent upon them. Most importantly, we needed jQuery Update to upgrade the core Drupal version of jQuery to a version compatible with Masonry.

There's more…

Using the default Bartik theme doesn't allow us to have a responsive mobile site. Switching our theme with a mobile-friendly version gives us the ability to enable animations and have a resizable grid. Some popular options include using the Bootstrap or Zurb Foundation's frameworks. To install, download Bootstrap from http://www.drupal.org and follow the instructions listed on the project page. Once the theme has been successfully enabled and set to default, we can watch Masonry animate while the browser window is resized.

Tech Concepts

Programming languages

Tech Tools

Unlimited access to the largest independent learning library in tech of over 8,000 expert-authored tech books and videos.

Innovative learning tools, including AI book assistants, code context explainers, and text-to-speech.

50+ new titles added per month and exclusive early access to books as they are being written.

By : Kyle David Taylor

Instant jQuery Masonry How-to

By: Kyle David Taylor

Overview of this book