ALM and Masonry

Hi humbucker,
1) This would be because your initial post query is outside the ajax load more container.
2) You will require some CSS magic to make sure your divs are cleared.

I usually recommend the Preloaded add-on to users who want to fetch posts before their ajax calls when using masonry.

To fully help you out I will need to see your site. Is that possible?

Hi,

I went a little bit futher, with some jQuery mods.
Here is a simplified demo so it’s easier to focus on code :
https://bit.ly/1M4eLwB

Loop index.php : https://codeshare.io/eQC5C
Masonry JS : https://codeshare.io/Sgbyb

Here is clear steps of what I’ve done :
1) I copied my post loop in your ‘repeater template’
2) Set my WP reading settings : post per page : 3
3) Generated this shortcode so that my 3 first posts are not loaded once again: [ajax_load_more post_type="post" posts_per_page="3" offset="3" pause="true" scroll="false" transition="fade" images_loaded="true"]
4) Modified the Masonry jQuery code so that newer contents get realigned properly now.

But :
a) The load more button stays on top no matter what’s loading below
b) The ALM sadly doesnt detect when there is no more post to load ‘before’ clicking a last time on it. You’ll see I got 9 posts, so I was hoping that when the 9 are loaded, it’s not necessary to click one last time for the button to go grey.

Thanks a lot one more time for your time.
If all goes well, we should maybe publish my Masonry code for other people to benefit from it as well.

The issue is you need to position the Load More button by either adjusting the height on the .alm-listing ul or positioning it absolute to the bottom of your post container.

.grid .alm-btn-wrap {
  position: absolute;
  bottom: -80px;
}

Obviously you will need to adjust this css, but this is just an example of how you can clear your items.

b) The ALM sadly doesnt detect when there is no more post to load ‘before’ clicking a last time on it. You’ll see I got 9 posts, so I was hoping that when the 9 are loaded, it’s not necessary to click one last time for the button to go grey.

This is an issue I get a lot and there is nothing I can do to fix this at this time. Basically the issue is ALM doesn’t know you are out of posts until the button is pressed again. This only happens the exact amount of posts equals the posts per page param.

Cheers,

Alright alright ??

I will manage to position the button then, thanks for the first CSS ideas.

About the “End of loop” detection, I may be suggesting something too simple for a solution here but…

As it’s possible to get the total number of posts in a specific loop, and we also know how many we display by page, how we offset, and how many are reloaded, I guess we can calculalte a delta, right ?

Eg :

Total posts : 9
Post per load : 3
Offset 3 (meaning 3 posts are already shown)

ALM should then gets these values :

Before first ajax load : 9 – 3 = 6
First ajax load : 6 – 3 = 3
Second ajax load : 3 – 3 = >>> 0

So if we equal 0 or are under the Post per page number, we know its over….

Right ?? ? ??

Yea, it should be simple because the query knows how many posts are in the loop except, the core ALM JS does not.
The issue is around the way posts are being sent from from the ajax function to the JS.

This is on my list of enhancements so hopefully i’ll be able to fix it soon.

Hi – I have the same issue and have purchased the pre-load add-on.
The first 6 posts I pre load are ignored by masonay.
Is there a way around this using the pre-load add on?

I’ve put together a Masonry example with Preloaded.
https://connekthq.com/plugins/ajax-load-more/examples/masonry/preloaded-masonry/

Let me know if this helps.