Dan Birlew

Las Vegas Web Developer, Designer, Programmer, and Author

Broken Masonry

Regarding the WordPress Version of Masonry

Posted February 20th, 2014 at 8:00am by Dan Birlew in Blog. Comments Off on Regarding the WordPress Version of Masonry

My recent speech at WordCamp Las Vegas 2013 came up again recently between myself and a colleague who’s as minimally adept at installing and activating JavaScripts and jQuery libraries as I am, it seems. He confused me by pointing out certain elements of my presentation (reviewed here) that he claimed were wrong. He had trouble with the imagesLoaded function until he searched the Masonry library and claimed imagesLoaded wasn’t included in Masonry at all; he had to link to it at the imagesLoaded page. He also claimed that when he did get it working Masonry was already animating, without setting the isAnimated option.

I soon determined why he’d had these problems: he hadn’t enqueued the WordPress version of Masonry at all, he’d done a head element script-link directly to the file at David DeSandro’s site.

So let me set the record straight: the version of Masonry that is included in the WordPress download package is an older version. Masonry 2.1.05 is what is included in WordPress, whereas the current library available is 3.1.4. If you link to or enqueue this version of Masonry in your theme or plugin then yes, there will be substantial differences.

Live-linking to any library is a bad idea. If the library is updated then the settings you scripted into your site may become obsolete due to a new release. Your site could be broken for a few hours or even days, if that’s how rarely you visit.

Bad enough is that WordPress always updates to the (almost) latest version of jQuery as this renders a lot of themes and plugins obsolete, forcing us web developers to update our themes and plugins and also forcing our users to download these updates in order to keep your WordPress sites working. But we can hardly expect WordPress to keep using jQuery 1.7.2 infinitely and render itself technically backwards, now can we?

The reason Masonry is even a part of WordPress is that it was used in the TwentyThirteen theme’s footer to align the widgets in nice columns regardless of list size. They enqueued the version of the script they needed to accomplish this task alone, and then they were done. Unless Masonry is used somehow somewhere else in the backend in a future update, I sincerely doubt that the Masonry script will get an update in upcoming WordPress packages.

My presentations about Masonry have been about how to use the version that is INCLUDED IN WordPress; hence I give these presentations at WordPress related meet-ups and conferences. Newer versions of Masonry are quite nice, however. For example, it already animates on browser resize, as my friend pointed out. It automatically centers the selected items within the container element, without having to add a custom layout. imagesLoaded is indeed missing, but only because Masonry is so much larger than it was before: almost three times larger, in fact. Using this version instead of the version included in WordPress is highly recommended; you need only download it, save it among your theme files and enqueue via direct link, as instructed here.

The most recent Masonry is more powerful than ever. With the increase in size and removal of separate functions like imagesLoaded, Masonry now includes the ability to be initialized inline in HTML, without any JavaScript at all. Please check out all the new functions that developers can use to spiffy up their layouts at masonry.desandro.com.

Tags: ,

Comments are closed.