Masonry and Jetpack Infinite Scroll – overlap issue

I am trying to implement infinite scroll with Masonry on my archive pages on my theme and I have a couple of issues:

1) The “Load more posts” button is hidden behind the initial posts when you first load the page, see yellow circle: See yellow circle here - the little grey box is the button

Read More

I feel a bit stupid asking this one but I don’t know how to fix this because Jetpack is loading the button in the same container as the posts, which is just the default behaviour, and all the posts are absolutely positioned because of Masonry so I can’t clear the button against them with CSS. I want the button to be below the posts.

2) (SOLVED, SEE BELOW ANSWER) When I click the button, the new posts overlap/load behind the initial posts, see picture:

Overlapping posts

I can’t seem to get the Masonry to trigger a relayout after the new posts are loaded. I have looked at this post http://wptheming.com/2013/04/jetpack-infinite-scroll-masonry/ and this question https://wordpress.stackexchange.com/questions/108552/jetpack-infinite-scroll-masonry-on-twenty-twelve-overlap but I can’t seem to find a solution to my problem.

The markup before the click:

    <div id="content" class="site-content" role="main">

            <div class="grid-sizer"></div>
            <div class="gutter-sizer"></div>

            <article class="featured">....</article>
            <article>....</article>
            <article>....</article>
            <article>....</article>
            <article>....</article>

            <nav role="navigation" id="nav-below" class="navigation-paging">...</nav>

            <div id="infinite-handle">
                <span>Older posts</span>
            </div>

    </div><!-- #content -->

The generated markup after the click:

    <div id="content" class="site-content" role="main">

            <div class="grid-sizer"></div>
            <div class="gutter-sizer"></div>                                    

            <article class="featured">....</article>
            <article>....</article>
            <article>....</article>
            <article>....</article>
            <article>....</article>

            <nav role="navigation" id="nav-below" class="navigation-paging">...</nav>

            <span class="infinite-loader" style="display:none">...</span>

            <article>....</article>
            <article>....</article>
            <article>....</article>
            <article>....</article>
            <article>....</article>

            <div id="infinite-handle">
                <span>Older posts</span>
            </div>

    </div><!-- #content -->

The PHP I am using for Jetpack (the post type in question is mytheme_portfolio) :

function mytheme_render_infinite_scroll() {
    while ( have_posts() ) : the_post();
            if ('mytheme_portfolio' == get_post_type()) :
                get_template_part( 'content', 'archive-portfolio' );
            else :
                get_template_part( 'content', get_post_format() );
            endif;
    endwhile;
}

function mytheme_jetpack_setup() {
    add_theme_support( 'infinite-scroll', array(
        'container'      => 'content',
        'type'           => 'click',
        'render'         => 'mytheme_render_infinite_scroll',
        'wrapper'        => false,
        'posts_per_page' => 5,
    ) );
}
add_action( 'after_setup_theme', 'mytheme_jetpack_setup' );

The jQuery:

(function( $ ) {

    $( document ).ready(function() {

        $('#content').masonry({
          columnWidth: '.grid-sizer',
          itemSelector: 'article',
          gutter: '.gutter-sizer'
        });

        $( document.body ).on( 'post-load', function () {
            $('#content').masonry({
              columnWidth: '.grid-sizer',
              itemSelector: 'article',
              gutter: '.gutter-sizer'
            });
        });

    });

}( jQuery ));

The CSS (although I don’t think it’s the problem as the initial posts are fine)…compiled with LESS, I’m using calc() to make things responsive:

article,
.grid-sizer {
  width: calc(((100% - (4 - 1)*1.5em)/4)*(1) + ((1 - 1)*1.5em));
}
article.featured {
  width: calc(((100% - (4 - 1)*1.5em)/4)*(2) + ((2 - 1)*1.5em));
}
.gutter-sizer {
  width: 1.5em;
}

Thanks so much for any help anyone can give.

Related posts

1 comment

  1. I have now solved point (2), the overlapping posts problem; maybe this will help someone else.

    I changed wrapper to true in the mytheme_jetpack_setup function in my PHP (so that the new posts are wrapped in their own div)

    And I changed the jQuery to:

        $('#content').masonry({
          columnWidth: '.grid-sizer',
          itemSelector: 'article',
          gutter: '.gutter-sizer'
        });
    
        var infiniteCount = 1;
        $( document.body ).on( 'post-load', function () {
            var elements = $('.infinite-wrap.infinite-view-' + infiniteCount + ' article');
            $('#content').masonry( 'appended', elements );
            infiniteCount++;
        });
    

    EDIT: I have also solved point (1) now too via CSS, can’t believe it took me so long to realise that’s all it needed. I added some padding-bottom to my Masonry/Jetpack container (in my case #content) and set the following in the CSS:

    #content #infinite-handle {
                position: absolute;
                bottom: 0;
                width: 100%;
                text-align: center;
                padding-bottom: 2em;
            }
    

    This positions it below the grid items and centers it too. Hope it helps someone maybe. You could do a similar thing with #infinite-loader too.

Comments are closed.