javascriptwordpresswordpress-themingmasonryimagesloaded

How To Get Masonry and ImagesLoaded To Work With Wordpress

Some 4 hours after the 20 minutes I expected it would take to set up masonry with some new wordpress themes I've decided I'd better ask for help.

I have masonry working fine with imagesloaded in my html mockup sites, here is the stripped down html code.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script src="imagesloaded.pkgd.min.js"></script>
<script src="masonry.pkgd.min.js"></script>
</head>

<body>

<div class="masonry-container js-masonry"  data-masonry-options='{ "isFitWidth": true }'>

    <div class="block-wrapper">content</div>

    <div class="block-wrapper">content</div>

    <div class="block-wrapper">content</div>

</div><!-- end masonry-container js-masonry -->

<script>
var container = document.querySelector('.masonry-container');
var msnry;
// initialize Masonry after all images have loaded
imagesLoaded( container, function() {
    msnry = new Masonry( container );
});
</script>

</body>
</html>

The Question:

How Do I Get That To Work With Wordpress?

What I've Tried So Far

Just about everything I could come up with on the googs. (I counted more than 40 tabs open trying to find an answer) Here's the simple variation I started with..

in functions.php (functions has absolutely nothing else in it)

function enqueue_masonry() {
    wp_enqueue_script('masonry');
}
add_action('wp_enqueue_scripts','enqueue_masonry');

in footer.php (imagesloaded)

<script>
var container = document.querySelector('.masonry-container');
var msnry;
// initialize Masonry after all images have loaded
imagesLoaded( container, function() {
msnry = new Masonry( container );
});
</script>

</body>

in index.php (also tried initializing from functions.php instead of in html)

<div class="masonry-container js-masonry"  data-masonry-options='{ "isFitWidth": true }'>

in header.php

<?php wp_head(); ?> 
</head>

Notes

My Guess

It's something obvious

Solution

  • The Answer

    The embarrassingly simple answer to my own question was I forgot to include <?php wp_footer(); ?> in the footer.php file.

    The next day however, I discovered that ImagesLoaded wasn't being initiated from the footer as one would expect so this answer has since been re-edited to show how I got ImagesLoaded to work properly.

    I should note that Masonry was initiating properly from the html in-page options method but the help files don't show a way to initiate ImagesLoaded with this same in-page method.

    Backstory (some info of possible use to others)

    The next day, after adding in some test posts with thumbnails to the test blog I found that ImagesLoaded wasn't initializing and all blocks were overlapping each other.

    I then discovered that attempting to initialize even Masonry with Javascript from footer.php was not working at all either.

    After another hour or two trying to figure out why neither script will initialize from either footer.php or header.php I gave up and went back to this suggestion

    ..why not just add it to a .js file and enqueue it with a loading dependency on the masonry script? Then you wouldn't have to add the jQuery code manually to the header/footer via hooks.

    Then I found again this question and answer How can I make masonry and Imagesloaded work correct. (wordpress) with an explanation how to do this.

    So with thanks to those two folks I will edit this all over again and show you how I got Wordpress working properly with Masonry and it's now-built-in ImagesLoaded.

    One Method On How To Add Masonry To Your Wordpress Theme

    Goals

    1. To have Masonry installed on your wordpress theme to make it behave like Pinterest.
    2. To have the page centered.
    3. To prevent the stacking on top of / overlapping of each block element.

    Some Stuff To Know

    Installation and Setup

    in functions.php

    // to use scripts with wordpress they must first be enqueued
function enqueue_scripts() {
    wp_enqueue_script('masonry');
    wp_enqueue_script('masonryloader', get_stylesheet_directory_uri() . '/js/TaS-masonryInitializer.js', array( 'masonry', 'jquery' ) );
}
add_action('wp_enqueue_scripts','enqueue_scripts');

    notes

    in your themes folder (eg /wp-content/themes/yourThemeName/)

    1. create a folder named 'js'

    2. inside that folder create a file named TaS-masonryInitializer.js

      • it should look like this /wp-content/themes/yourThemeName/js/TaS-masonryInitializer.js

    3. copy and paste this Javascript into that file..

      (function( $ ) {
"use strict";
$(function() {
    // set the container that Masonry will be inside of in a var
    // adjust to match your own wrapper/container class/id name
    var container = document.querySelector('.masonry-container');
    //create empty var msnry
    var msnry;
    // initialize Masonry after all images have loaded
    imagesLoaded( container, function() {
        msnry = new Masonry( container, {
            // adjust to match your own block wrapper/container class/id name
            itemSelector: '.block-wrapper',
            // option that allows for your website to center in the page
            isFitWidth: true
        });
    });
});
}(jQuery));

    notes

    in index.php (or other template files depending where on your site you want masonry used)

    <div class="masonry-container js-masonry">

    <div class="block-wrapper">content</div>

    <div class="block-wrapper">content</div>

    <div class="block-wrapper">content</div>

</div><!-- end masonry-container js-masonry -->

    notes

    in footer.php

    make certain to have included wp_footer() before your closing body tag.

    <?php wp_footer(); ?>

</body>
</html>

    notes

    in header.php

    make sure you have..

    <?php wp_head(); ?>

    right before </head>

    and as most people are probably using Masonry for a mobile friendly site these days, be sure to include the following code (again, between head and /head) to make things work on mobile browsers..

    <meta name="viewport" content="width=device-width, initial-scale=1">

    Please let me know of any misunderstandings I have and errors I've overlooked and I'll try to correct them.

    Mad props to David DeSandro for writing a hella good script. Check out his website, he's created some other wicked cool stuff.