Blogue

Últimas sobre Web, Design e Código

Masonry Tutorial


Masonry-jQuery-Web-Design-8Screen Shot 2015-04-26 at 22.36.26

This tutorial will help you create Masonry gallery in Drupal. The example I give was applied in one of the my latest Drupal projects: Children’s World Foundation website.
If you want a dynamic grid layout, in a Pinterest or Windows 8 style, Masonry might be your answer. Masonry is a JavaScript grid layout library. As Dave DeSandro, its creator says, “(…)It works by placing elements in optimal position based on available vertical space, sort of like a mason fitting stones in a wall”. It looks great and it works in IE8+ and modern browsers, including mobile browsers on iOS. and Android.
To use it in Drupal, here’s what you need to do:

1- Install the modules Views and jQuery Update.
You’ll need to copy the jquery_update directory to your sites/SITENAME/modules directory.

After enabling the module, you update the site jQuery to jQuery 1.7 version in YOURSITE/admin/config/development/jquery_update.

 

2- Next create a new View, call it whatever you like and make sure you create a new page view.

Screen-Shot-2015-04-26-at-16.27

Page: Style options > Grouping field Nr.1 (your image content field) > Use rendered output to group rows

FIELDS > Content: YOUR IMAGE CONTENT TYPEContent: Published (Yes)
Content: Type (= YOUR IMAGE CONTENT TYPE)
Content: Published or adminYou can specify this content either creating a specific content type for this view or associating a tag to the field, which you’l also integrate in the FIELDS filters.
3- Head here and download the latest production version of Masonry.
Unloaded images can throw off Masonry layouts and cause item elements to overlap. ImagesLoaded resolves this issue. imagesLoaded works by triggering a callback after all child images have been loaded. So download, also the ImagesLoaded script.
Go to your Drupal theme’s folder and throw these scripts (masonry and imagesLoaded) in with your other scripts. I usually have a dedicated /scripts directory for these. Create a script.js file, if your theme doesn’t have one already. Next edit your theme .INFO file and add the script. Note if you do not already have a separate generic script file that runs on every page load, create one and add it as well:
scripts[] = scripts/scripts.js
scripts[] = scripts/masonry.pkgd.min.js
4- In scripts.js include this snippet://run masonry when page first loads
$(function() {
var $container = $('.view-content');
$container.imagesLoaded( function() {
$container.masonry({
itemSelector: '.item',
gutter: 5,
});
$container.masonry('bindResize');
});


5- Create this template in your theme: views-view-unformatted–YOUR IMAGE CONTENT TYPE.tpl.php.
In Views go to Advanced > Other > Theme: Information > and include this:
<div class="item">
<?php foreach ($rows as $id => $row):
print $row;
endforeach;
?>
</div>
6- If you haven’t already, create a unique template file for your content type, do so (‘PAGE_OR_NODE–YOUR_CONTENT_TYPE.tpl.php’). At this point flush your Drupal caches to refresh Drupal on all your new template files. The base template for nodes is node.tpl.php. For pages is page.tpl.php. You just have to copy the respective template code and paste it in your new PAGE_OR_NODE–YOUR_CONTENT_TYPE.tpl.php.

And that’s it! I hope this will be usefull and you enjoy the effect of the amazing Masonry.

Twitter LinkedIn Google+ Facebook