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:
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:
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.
I have now solved point (2), the overlapping posts problem; maybe this will help someone else.
I changed
wrapper
totrue
in themytheme_jetpack_setup
function in my PHP (so that the new posts are wrapped in their own div)And I changed the jQuery to:
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: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.