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.