Support for Masonry 3.0?

Yes.

Unfortunately I only noticed the new Masonry version just after releasing v2.0 of Masonry API, otherwise I would have held off until I had support for it built in.

As it is, I will release a new version of Masonry API (v2.1) that will require v3 of the Masonry library. Stay tuned!

This patch seems to work for converting from v2 to v3.

To use this patch, you must create a directory for imagesloaded in the libraries directory and then download the images loaded JS from http://desandro.github.io/imagesloaded/imagesloaded.pkgd.min.js. You must also download Masonry v3 from http://masonry.desandro.com/ and put it in your masonry libraries directory.

Patch in #2 looks good, but as of version 3.1.1 several options and method names have changed in the javascript library.

Here is a patch which incorporates #2 and adds the necessary changes to masonry.js

will test this later as masonry 2.x breaks qtip2 due to imagesLoaded Plugin.

update:
works like a charm. In order to get it working with #1808018: Make work with Views Infinite Scroll I had to change the patched

      $container.bind('change', function() {
        $container.masonry('reload');
      });

to

      $container.bind('change', function() {
        $container.masonry('reloadItems');
      });

Here is a patch and interdiff to support Views Load More. In v3.1.2 (at least) we need to call 'layout' after 'reloadItems'.
See https://drupal.org/node/1907272.

NB:This might also suit Views Infinite Scroll.

EDIT: Oops whitespace errors. Sorry.

This patch not working for https://drupal.org/project/masonry_views. On views format settings:
These options have been disabled as the jQuery Masonry plugin is not installed.
In admin/reports/status: jQuery Masonry 3.1.4, jQuery Update jQuery 1.7.1

Upd: sorry lib imagesloaded dos'nt installed…

Any commit soon to make it works with masonry 3 ?

Tested #5, works great!

@ #7 I'm having the same issue in views, getting the message 'These options have been disabled as the jQuery Masonry plugin is not installed.' I've checked my libraries folder and have imagesloaded.pkgd.min.js there. How did you fix the error?

Tested #5.
Works great. Now even works with
-module and as guessed in #5 with Views Load More-module.

@ #10:
i had the same issue.
• I changed my versions of masonry.pkgd.min.js to (v3.1.5) & imagesloaded.pkgd.min.js to (v3.1.4). i don't know if this is required, but it works for me.
• do you have your .js in a libraries-subfolder? (sites/all/libraries/imagesloaded/imagesloaded.pkgd.min.js) and the same for (sites/all/libraries/masonry/masonry.pkgd.min.js)
again, i don't know if this is required or not.
• changed my jQuery version back to 1.7
• clear caches(?)
• run a dbupdate(?)

Thanks donlucas, I didn't have imagesloaded in a separate directory in the libraries folder. Did that and it worked!

I'm getting the following JavaScript error in my console when clicking on an Ajax filter:

cannot call methods on masonry prior to initialization; attempted to call 'reloadItems' masonry.pkgd.min.js?n3gq9w:9
cannot call methods on masonry prior to initialization; attempted to call 'layout' masonry.pkgd.min.js?n3gq9w:9
cannot call methods on masonry prior to initialization; attempted to call 'reloadItems' masonry.pkgd.min.js?n3gq9w:9
cannot call methods on masonry prior to initialization; attempted to call 'layout'

Seems like masonry needs to be re initialization on each Drupal.behaviors call. Not sure why though, it's the same container so should pick up the same instance of masonry.

I changed
$container.masonry('reloadItems').masonry('layout');
to
$container.masonry().masonry('reloadItems').masonry('layout');
And it worked. But I don't think the extra masonry() should be required.

I guess views Ajax replaces the div with a new one. Will double check this but makes sense.
It does work with the load more pager, again this makes sense as it just adds to the existing container (it doesn't replace everything).

I think really there should be a check to see if masonry needs to be initialised (and if not, do it). I will take a look at this tomorrow.

Fixed by using once() and checking if container has already been processed. This should have been on there anyway (it's a better way to check than context == document)

Patch attached (applies to current dev branch).

Works for me, thanks leon.nk and others.

Is #13 already in the DEV?
During patching it says previously applied patch detected...

I added support for Stamps and using CSS selector as the columnWidth setting. If you use the CSS selector you need to include your sizer into the template file and set the item widths via CSS.

couple issues:
* latest patch doesn't apply cleanly
* to properly add the imagesloaded requirement, masonry_requirements() in masonry.install needs to be updated as well

re-roll of #20 @dev, adding imagesloaded to hook_requirements

aaaaand fixed a typo

Works for me
This even fixes compatibility with Views Infinite Scroll
Once patches #44 and #50 from #1806628: Support Masonry module are applied

#23 have whitespace errors ?

sites/all/modules/masonry/masonry-support_3_0-2022371-23.patch:73: trailing whitespace.

sites/all/modules/masonry/masonry-support_3_0-2022371-23.patch:74: trailing whitespace.

@zanix Which patch of these fixes it for you?

I tried patching Masonry with patch #23 here, than Views Infinite Scroll with the patches you linked, #44 applied, but #50 gives Hunk #1 FAILED at 74.

Did you have any other patch on VIS before applying #50, or any patch on masonry_views?

@kopeboy patch #23
I didn't get those white space errors you are getting though.
I think this was the only patch I applied to masonry, I could double check.

Ok, looking at the patch I see there is trailing spaces on lines 73 and 74. The patch command on my system doesn't seem to care about those lines.
I also noticed that the patch added one space to the tab indenting for masonry.js which is bad formatting.
I re-rolled patch #23 to remove the trailing spaces and fix the formatting.

i have the files in the correct place (at least I think but i'm still getting an error in views that it cant find the library files.

the path i have is sites/all/libraries/Masonry/ and sites/all/libraries/imagesLoaded/

Why arent they working?

The library files need to look like this (no capitol M or L)

sites/all/libraries/imagesloaded/imagesloaded.pkgd.min.js
sites/all/libraries/masonry/masonry.pkgd.min.js

just as i thought. Thats exactly how i have it. still no go.

this is probably not the place to put this, but i've added both of the files to the libraries directory as listed in #31. i can select Masonry from the views format, but in the settings i get the dreaded "These options have been disabled as the jQuery Masonry plugin is not installed." over and over again. tested the js and its all there. no breaks in anything. any ideas? anyone?

What does the Drupal Status report page (/admin/reports/status) say?

at first it said that it couldnt find the jQuery Masonry Plugin, then i changed the paths and now it shows success. but i get the same error in the views.

Once you get the status page to recognize that masonry is detected, clear caches and try setting the view to masonry again.

Patch mostly works good!

The dependence on jquery_update, and this new imagesloaded lib is currently undocumented, so it was quite frustrating to upgrade to.

So I'm adding an INSTALL.txt.

Small bug - the new version of masonry takes an element selector as the argument to columnWidth http://masonry.desandro.com/options.html#columnwidth
When setting the columnWidth to (eg) 200 in the options, this was getting passed through the JSON settings as a string "200" not an int, and then the js tried to look for the element named "200". (and everything broke and all my items ended up in a pile at 0x0 on the axis.)

So I'm checking the masonry_column_width input from the options form and casting it to an int if needed.

I can't seem to get column_width with percentages working well.
With some repairs, It can work once, but if the container resizes (responsive) then it's not recalculated. Looks like the old module code used a callback that is not in the new library.
With good element and css support, maybe we can drop the percentage option. Looks like it was tacked on at this end, rather than an actual masonry feature.

Added INSTALL.txt, integer widths on elements, and half-support for percentage widths

Hello Everyone, Is there a way to work with corner stamps? I would like to add the View Header as first element, and make the rest of the elements wrap around this element, apparently the last Masonry views module doesn't support this and I would like to know if there is any update I could use to make it work.
Thank you!

@kammyel, this sounds like a separate issue to me. Your best chance of getting support is to open a new issue.

@dman
You confirm that this will work with a CSS selector (CSS class input in the View) and a width setting (both pixels and percentages) in the CSS files, right?

I used it with pixel widths (variable on responsive breakpoints) with classes set on the elements (in panels settings and display suite), and css.
Worked there.
Haven't had a use for percentages, as we use breakpoints in theme. It should work if you try it though.

Commited on 7.x-3.x branch.
Thanks a lot to all !

Masonry API version = "7.x-3.0-beta1"
Views Infinite Scroll="7.x-1.2+1-dev"

I have the same error post #13
cannot call methods on masonry prior to initialization; attempted to call 'reloadItems' masonry.pkgd.min.js?n3gq9w:9
cannot call methods on masonry prior to initialization; attempted to call 'layout' masonry.pkgd.min.js?n3gq9w:9

Solve
$container.masonry().masonry('reloadItems').masonry('layout');

@ean
Please open a new issue if still issuing on this.
Dom.