We are transitioning over to a new forum platform. Please post new issues there. Existing threads will be dealt with here unless you choose to move them over. Visit the new forum

Forum

Thread tagged as: Question, Runway, Blog

Infinite Scroll Blog Archive

I'm looking to list a lot of blog posts in a very long archive page. I've seen some posts about using the infinite scroll to call up other pages into the same page. That's not what I want. I want to essentially have a list of, say, 100 posts and only show 20 of them. When the user click a "more" button, it unhides another 20, and so on. The posts don't exist on another page. They are just listed this way:

<?php
    perch_blog_custom([
        'count'      => 100,
        'sort'       => 'postDateTime',
        'template'   => 'blog/post_in_column.html',
        'sort-order' => 'DESC',
    ]);
?>

How do I accomplish this?

Leigh C

Leigh C 0 points

  • 1 year ago
Drew McLellan

Drew McLellan 2638 points
Perch Support

That should list 100 posts for you. Does that work?

Leigh C

Leigh C 0 points

Yes, but my question is how to hide most of those post and show a "more" button for an infinity scroll action. But since more posts don't exist on other pages, how does that work?

Duncan Revell

Duncan Revell 78 points
Registered Developer

If you're happy requesting the 100 posts in one go, you would probably then need to use some javascript to hide the posts you don't want to see, then use some more javascript attached to a button to manipulate the DOM to show the posts you do want to see.

You could possibly use this example as a basis (but don't use the 'previous' button, just the 'next' or 'more' button):
https://docs.grabaperch.com/perch/content/functions/how-do-i-link-prev-next/ again using javascript/ajax.

Another option is to the paginate option on the query, using some javascript/ajax calls to add more posts to the page every time the button is pressed.

Either way, javascript will be involved.

Leigh C

Leigh C 0 points

Cool thanks for the link Duncan. I'll give this a try.