[Feature Request] Infinite Scroll

[pvanthony]

Could we have infinite Scroll for publii websites?

Here is a how to for wordpress.
https://www.wpbeginner.com/plugins/how-to-add-infinite-scroll-to-your-wordpress-blog/

Here is a news website that has infinite scroll. I hope infinite scroll is the correct name.
https://www.channelnewsasia.com/world/pope-says-ukraine-should-have-courage-white-flag-negotiations-4183841

[candidexmedia]

Some themes have it already:

Sources: https://demo.getpublii.eu/themes/sources/2/

Persona (premium): https://marketplace.getpublii.com/themes/persona/

Luckily, you can implement Infinite scroll yourself by adding the JS library to your site files: https://infinite-scroll.com/

---

Similar topics from the old forum:

• https://forum.getpublii.com/topic/mercury-theme-filter-filter-all-posts/
• https://forum.getpublii.com/topic/does-publii-have-infinite-loading-feature

[pvanthony]

Thank you very much for the reply and the links.
Very useful!

So I just have to choose a theme that has the infinite scroll feature.
I have to look for a theme that will do infinite scroll for all the blog posts.

Thank you very much for the sharing the information. It is very useful because it points me to the right path of checking the themes.

[candidexmedia]

No problem!

You can either select a theme that already has it, or manually add infinite scroll to the theme of your choice.

[pvanthony]

That's the problem. I do not know how to add it to the theme.
Currently I am using Editorial 2 version 1.4.0.0
https://marketplace.getpublii.com/themes/editorial-2/

[candidexmedia]

I tried testing it on my end, but got stuck and couldn't get it to work...

In the meantime, changing your "Posts per page" Theme setting to "-1" can also work to display all your posts at once. That's what I've done in another blog, since I didn't want to move to another theme just for infinite scroll.

I'll share what I tried so far for infinite scroll in Editorial 2 anyway, in case someone else has better luck than me:

Add the Infinite Scroll .js

Easiest way to do this is to go to Tools & Plugins > Custom HTML > Footer and paste the following:

<!--- INFINITE SCROLL JAVASCRIPT --->
<script src="https://unpkg.com/infinite-scroll@4/dist/infinite-scroll.pkgd.min.js"></script>

Initialize the JS

Infinite Scroll works on a container element with item elements. In your Editorial 2's case, it looks something like this:

<div class="posts">
  <article>...</article>
  <article>...</article>
  <article>...</article>
  <article>...</article>
  ...
</div>

There are two ways to activate infinite scroll in your theme:

Option 1 - Initialize with vanilla JavaScript

Go to [Publii sites directory] > [site folder] > input > [theme or theme-override] > index.hbs

➡️ add class for articles

Edit from this:

      <div class="posts">
         {{#each posts}}
            <article>

to this:

      <div class="posts">
         {{#each posts}}
            <article class="c-card">

Go to [Publii sites directory] > [site folder] > input > [theme or theme-override] > partials > pagination.hbs

➡️ add class for pagination links

Edit from this (2 occurrences):

      {{#if @pagination.nextPage}}
         <a href="{{@pagination.nextPageUrl}}">

to this:

      {{#if @pagination.nextPage}}
         <a class="pagination__next" href="

Then, in the Publii app: go to Tools & Plugins > Custom HTML > Footer and paste the following below the infinite-scroll.js:

<script>
let elem = document.querySelector('.posts');
let infScroll = new InfiniteScroll( elem, {
  // options
  path: '.pagination__next',
  append: '.c-card',
  history: false,
});
</script>

Option 2 - Initialize with HTML

(Assuming you added the classes in option 1) Go to [Publii sites directory] > [site folder] > input > [theme or theme-override] > index.hbs

Edit from this:

<div class="posts">

To this:

<div class="posts" data-infinite-scroll='{ "path": ".pagination__next", "append": ".c-card", "history": false }'>