How To Get Masonry and ImagesLoaded To Work With WordPress

2 Views

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.

Read More
<!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

  • all plugins disabled
  • its a custom, parent theme
  • functions is currently empty save for what’s written above
  • wordpress version 4.2.2, masonry confirmed in js folder
  • i’ve read ImagesLoaded is built into wordpress’s masonry

My Guess

It’s something obvious

Post Views: 2

Related posts

1 comment

  1. 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

    • Current WordPress versions (3.9? to 4.2.2+) come packaged with Masonry.
    • Location – wp-includes/js/masonry.min.js
    • This WordPress version of Masonry includes ImagesLoaded built-in.
    • Masonry no longer requires Jquery, though the only way I could find to get it to initialize in WordPress requires a little bit of it.

    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

    • because WordPress may use other scripts and plugins you install may rely on some others ‘enqueueing scripts’ is how WordPress manages them all so as not to conflict with each other. I’d go into more detail but I’m not qualified to do so.
    • you may see on some other websites examples that show you have to first register Masonry. This is not so as it is included with WordPress and so is already registered.
    • the two script we are enqueing here are first Masonry and second our little script to get masonry to initialize.
    • Jquery is also being uhh, enqueued as a dependency for the little Initializer script to work.

    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

    • this step is to initialize both Masonry and ImagesLoaded and to adjust the options for Masonry
    • as stated earlier, ImagesLoaded is built into the wordpress version of Masonry so no need to enqueue it separately in functions.php as you would have to do on a straight html site.
    • to measure height of each image and it’s containing block ImagesLoaded is used to prevent Masonry from loading before these heights are determined. This pause/order allows Masonry to properly calculate the height of each block. This is important if you are using height: auto; on your images, as many responsive designs do.
    • assuming your page width is responsive and set to 100%/not fixed, Masonry needs to determine how wide that 100% actually is in able to center your site on the page. The option "isFitWidth": true is how this is done. Read more about that here.
    • you can assign a column width by letting masonry choose the first block’s width and applying it as the column width or you can state explicitly the column width in the options as per this page.
    • .masonry-container is the class of the container that wraps around all your blocks that you want to behave as masonry behaves
    • it can be an ID as well if, you prefer, #masonry-container
    • it can be any name, just be sure to adjust for it in the above function
    • the above code is taken from How can I make masonry and Imagesloaded work correct. (wordpress) as well as Masonry’s own instructions

    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

    • the class “masonry-container” can be either a class or an id and can be any name you choose, just be sure to adjust for it in the TaS-masonryInitializer.js file
    • to my recollection, the class “js-masonry” is required for Masonry to find the opening div and cannot be renamed without meddling with the script itself.
    • each div classed “block-wrapper” is a different block element that you are applying the masonry alignment effect to.
    • “block-wrapper”, like “masonry-container”, can be any name you choose and either an id or class.

    in footer.php

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

    <?php wp_footer(); ?>

</body>
</html>

    notes

    • wp_footer is used by wordpress to enable scripts on your page in one single action. The scripts you enqueued in functions.php are hooked into wp_footer. (Excuse my terminology, I’m sure I misused a couple of words there)

    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.

Comments are closed.