Infinite Scroll

Kirby 2 Solutions 🎉
1

Time for a little giveback to the community…and because I’ve already written it for my blog, I thought it would be a good idea to post it here…

Introduction

In this post I show how to use Ajax jQuery Scripts to implement an infinite scroll through your blog articles.

Installation

Download the required Javascript File jquery-ias.min.js from (link: https://infiniteajaxscroll.com text: Infinite Ajax Scroll) and put it into assets/vendor/infinite/. Include jquery in your header.php if you not already have.

Edit your templates

Wrap your current article loop into a div (e.g. blog.php, if you are using the example from the kirby site) or use an existing class:

<div id="blog">
  <section class="wrap">
    <?php if($articles->count()): ?>
      <?php foreach($articles as $article): ?>
        <article class="blog-article index">
          ...
</div>

Give your Next Link an identifiable class (here: right in pagination.php):

<?php if ($pagination->hasPages()) : ?>
  <nav class="pagination wrap cf">
    ...
<?php if($pagination->hasNextPage()): ?>
    	<a class="pagination-item right" href="<?= $pagination->nextPageURL() ?>" rel="next" title="older articles">
    		<?= (new Asset("assets/images/arrow-right.svg"))->content() ?>
    	</a>
    	...

Update your snippets

Include the required JavaScript in your header.php (or combine them with your existing js):

<?= js('assets/vendor/infinite/js/jquery-ias.min.js') ?>

Activate the Ajax by also including this script (infinite.js) (adjust the identifier to match your class names):

var ias = jQuery.ias({
  container:  '#blog',
  item:       '.blog-article',
  pagination: '#pagination',
  next:       '.right'
});

// Add a loader image which is displayed during loading
ias.extension(new IASSpinnerExtension());

// Add a link after page 2 which has to be clicked to load the next page
ias.extension(new IASTriggerExtension({offset: 2}));

// Add a text when there are no more pages left to load
ias.extension(new IASNoneLeftExtension({text: "You reached the end"}));

Finally you can change the loader images to something different by adjusting the parameter to IASSpinnerExtension():

// Add a loader image which is displayed during loading
ias.extension(new IASSpinnerExtension({
	src: '/assets/images/loader.svg',
}));

You can see it in action on my blog.

2 Likes
2

I’m going to add my 2c to this.

First, you forgot to mention one also needs to include jquery to the site otherwise this is not going to work.

Second, I’m going to suggest this alternative: https://infinite-scroll.com that is also free (the commercial license is also better and doesn’t have the silly 1 site limit) and has a vanilla js option and all the same benefits.

And finally, I’d personally add a check to make sure the scripts are only loaded and invoked in the pages where you actually need them and not everywhere.

Minor feedback on your blog: it’s annoying to have the footer constantly running away as soon as you reach the bottom of the page especially because you have links there.

That said, thanks for the write up

And happy new year :wink:

3

Hehe, having a footer with infinite scroll doesn’t make sense imho. You better put its info at the top (or side) imho. :wink:

4

Yeah or an in-between solution. Footer + infinite scrolled that’s triggered only after the user has clicked on the load more button. That’s what I’ve done here and works quite well. The footer is accessible at least once and sponsors are happy :smile:

5

Thank you all for your response. You are right about the positioning of the footer - using infinite scroll was mainly a “let’s try it out” experiment. I’m not sure at all if I like it or if I keep using it.

Regarding the alternative inifinite-scoll you mentioned: I’m not sure about the license for non-commercial sites because it says:

Releasing your project that uses Infinite Scroll under the GPLv3, in turn, requires your project to be licensed under the GPLv3. If you are okay with this, feel free to use Infinite Scroll under the GPLv3, without purchasing a commercial license.

But using a solution that don’t require jquery could be intersting for a lot of people, so thanks for the suggestion.

6

I’m not sure about the license for non-commercial sites

I was mainly talking about the commercial license :wink:
The one I linked has a per developer license rather than per site which is something I personally like.

As for the free version you’re right, there’s a slight difference since one is under MIT and the other is under GNU.
That said, i’m a big fan of paying for software in general, especially if the license has very good terms.

As for your site specifically, I just noticed you still have the prev/next arrows on the side and that’s a bit confusing.
Also, another totally unrelated suggestion, you can simplify the favicons a bit.

This site is excellent in that regard: http://realfavicongenerator.net

7

Thank you for your suggestion with the arrows, you are absolutely right about this.

What’s the problem with the favicons? I used http://www.favicomatic.com/ for them.

8

That you don’t need all those sizes for iOS for example.
And at the same time, you’re missing a couple of extra meta tags.

As I said, give http://realfavicongenerator.net/ a try.
It generates a really compact code and has only the sizes you need and all the additional meta tags.

3 Likes
9

Thats a good tool… I use the webpack version which is pretty much the same as the web version. You just feed it an SVG and it generates all the images for you.

10

Yes, great tool, using it myself.