General loading problem for Masonry pages

Firstly, WordPress is bundled with the Masonry script. You should load it like so:

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

Then, instead of using the data-masonry attribute method, use the Javascript method by adding the <script></script> stuff to the footer:

function my_masonry_script() {
    ?>

    <script>
        // Blah blah blah
    </script>

    <?php
}
add_action( 'wp_footer', 'my_masonry_script' );

But, for the script, use imagesLoaded (which is bundled with WPs verison of Masonry, as I understand it):

<?php
function my_masonry_script() {
    ?>

    <script>
        $( ".content.grid" ).imagesLoaded( function() {
            $( ".content.grid" ).masonry( {
                "itemSelector":    ".grid-item",
                "percentPosition": true,
                "gutter":          50
            } );
        } );
    </script>

    <?php
}
add_action( 'wp_footer', 'my_masonry_script' );

The problem is that for Masonry to lay things out properly, it needs to know how big each element is, and if the script runs before all the images are ready, it will get it wrong. imagesLoaded ensures that the masonry doesn’t happen until the images are loaded.

Thanks a lot! I will try all this later today and will let you know if it worked ??

Generally speaking, Masonry can conflict a lot with other JS stuff, it’s better to load it as LAST JS in page. But depends setup, of course.

If you can, try load it after Jquery and better, as last js loaded script.

Regards,

Not very lucky with it so far. As I undertand it correctly, I would only need to add

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

in the head section of my (Genesis) template, no need to add the javascript file again, and the add

function my_masonry_script() {
    ?>

    <script>
        $( ".content.grid" ).imagesLoaded( function() {
            $( ".content.grid" ).masonry( {
                "itemSelector":    ".grid-item",
                "percentPosition": true,
                "gutter":          50
            } );
        } );
    </script>

    <?php
}
add_action( 'wp_footer', 'my_masonry_script' );

to my functions file. But this gives me one column instead of a grid.

So both those files would need to go in your functions file.

Ok, so now I have this added to my functions file, but still only one column:

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

function my_masonry_script() {
    ?>

    <script>
        $( ".content.grid" ).imagesLoaded( function() {
            $( ".content.grid" ).masonry( {
                "itemSelector":    ".grid-item",
                "percentPosition": true,
                "gutter":          50
            } );
        } );
    </script>

    <?php
}
add_action( 'wp_footer', 'my_masonry_script' );

Would it be ok if you left the site that way for a bit so I can look at it?

Got it, I think ??

I added only this to my functions file

wp_enqueue_script( 'masonry' );

And this to the footer section of the Genesis theme

<script type="text/javascript">

        jQuery(window).load(function() {

      // MASSONRY Without jquery
      var container = document.querySelector('.grid');
      var msnry = new Masonry( container, {
        itemSelector: '.grid-item',
        columnWidth: '.grid-item',
	percentPosition: true,
	gutter: 50
      });  

        });

</script>

No idea why the options I tried didn’t work, but this did. The only thing misssing here is the imagedLoaded part…

Well i’d guess it’s because of a straighter HTML output, like suggested.

Glad it worked, Masontry is quite fun indeed,

Yes it is fun. Now I only need to find a way to make infinite scrolling work, but that’s another topic ??