How to add jquery masonry / JS library


i read this thread about hot to add a JS lib in roots.

i think that it worked for my bower install of jquery-ui but when i try to install jquery masonry (also with bower) in installs the files to the vendor.

I added the files to the gruntFile.js

‘assets/vendor/jquery-masonry/masonry.js’, <–

an it doesnt throw any error –
but it gives me this error on the console

Uncaught TypeError: Cannot read property ‘create’ of undefinedscripts.js:2282 masonryDefinitionscripts.js:2447 (anonymous function)scripts.js:2453 (anonymous function)

the code of the compiled script is this:

// used for AMD definition and requires
function masonryDefinition( Outlayer, getSize ) {
// create an Outlayer layout class
var Masonry = Outlayer.create('masonry');
Masonry.prototype._resetLayout = function() {
this._getMeasurement( 'columnWidth', 'outerWidth' );
this._getMeasurement( 'gutter', 'outerWidth' );

Does anywone hove a idea – where the problem is and if i can fix it if i embed the library differently?


You want to include the pkgd version, not the masonry.js, Unless you plan on compiling it via grunt. It should be under /dist/.

Also: WP includes a lot of popular scripts already enqueued, including Masonry and UI, so I’m not sure you need to do any of this at all.

@ewafford is correct. You need to add the packaged, unminified js file to grunt.

I recommend against using the built-in WordPress version because it’s not kept as updated as you can keep it by managing it yourself through Bower (it’s also already minified which isn’t great for Grunt/Gulp).

thanks a lot!
Using the packaged version in the vendors/dist/ folder fixed the problem!


1 Like