Sridhar Katakam

Genesis and WordPress Tutorials

Infinite Scroll + Masonry in Genesis

by 4 Comments

In one of my earlier tutorials, I showed how to set up a button to load more posts on the same page using Infinite Scroll in Genesis.

In this article, we are going to take it one step further and use Isotope script (from the same author, Desandro aka Metafizzy) to set up the posts on content archives (Posts page and archives) in Genesis to appear in a Masonry layout.

In addition to the initial appearance, we are going to load/append the next page of posts in the masonry layout when the Load more posts button is clicked using Infinite Scroll script.

While the tutorial has been written for Genesis Sample, it should work with a few adjustments in any Genesis theme.

Step 1

Upload imagesloaded.pkgd.min.js, isotope.pkgd.min.js and infinite-scroll.pkgd.min.js to child theme's js directory.

Create a file named say, infinite-scroll-init.js in the same location having this code:

To view the full content, please sign up for the membership.

Already a member? Log in below or here.

  • Thank you for this. There seems to be an issue loading images with infinite scroll on Safari. The first page is fine but subsequent pages do not show any images (it looks like they have zero height). Do you have a workaround? Thanks.

    Reply

      • Thank for that. I could not get this to work, but the following did. Are there any issues with doing this. Thank you.

        // append items on load
        $grid.on( ‘load.infiniteScroll’, function( event, response, path ) {

        // jQuery
        $grid.on( 'append.infiniteScroll', function( event, response, path, items ) {
        $( items ).find('img[srcset]').each( function( i, img ) {
        img.outerHTML = img.outerHTML;
        });
        });

        Reply

  • Hi Sridhar, does this work for Infinity Pro?
    The posts all display this date: October 13, 2017.

    so is this code still needed:
    function custom_post_info( $post_info ) {
    $post_info = ‘October 13, 2017’;

    return $post_info;

    }
    Thanks.

    Reply
    • >