Hi, I’m running a customized Source theme and noticing that infinite scroll is working on tag pages but not on my home page where the post-list is. The posts just stop after 15 and there’s no pagination or infinite scroll. Can you point me in the right direction for how I can add either pagination or infinite scroll to the home page? burlington-buzz.ghost.io (pw Buzz)
The infinite scroll doesn’t work in your starting page.
See the code of current/content/themes/source/assets/js/main.js
/* Infinite scroll pagination */
(function () {
if (!document.body.classList.contains('home-template') && !document.body.classList.contains('post-template')) {
pagination();
}
})();
Your body of the starting page has the css-class home-template .
Try to remove the {{body_class}} in the default.hbs:
<body class="{{body_class}} ...
to see if it’s working.
But I think there are more side effects when you remove the {{body_class}}…
The other option: Change the code of current/content/themes/source/partials/components/post-list.hbs
Better solution:
Code injection on the Site Footer of you start page add the line
<script>pagination();</script>
Then you can keep the {{body_class}} and you don’t touch the code of Source theme.
1 Like
That worked perfectly, thanks!
Actually - now my footer just never shows. 
Is there a way to limit the number of posts on infinite scroll, or maybe I should add pagination instead of infinite scroll. Otherwise no one ever will see my secondary navigation…
You should paginate if you want the footer to show. Infinite scroll and footers aren’t really compatible, especially if you have oh, say, 1300-ish posts. 
If you remove the pagination() bit you just added, I /think/ that in source you just need to make sure the first page links to /page/2 and then you’ll be good to go. (That link should have already been there, unless you made changes.)
I wonder if I did make changes because it is not there. I’ll check in an unadulterated template and see what I’m missing. Would that be in home.hbs?
Should be, yeah. It says something like “see more” with an arrow.
The only way I can see is to edit the current/content/themes/source/partials/components/post-list.hbs and to increase the limit of the posts. Something like
{{#get "posts" include="authors" limit="....."}}
By the way, I have seen the Events menu item.
Did you manage all the fields (location, maps …) in Ghost?
As far as I know there are no custom fields in Ghost.
Blah I can’t find it anywhere. I looked up and tried some things, but even when I can get it to partially work the second page goes to infinite scroll and I never get a previous button. I downloaded the original Source theme and the home.hbs doesn’t have anything about pagination. Post-list appears to be configured, though. I tried just adding {{pagination}} to the bottom of home.hbs and it at least got me a next button but page 2 infinite scrolls and a Prev button never comes up.
This is the very last thing to fix before I’m happy with the site! I’m sure we’ll get it figured out.
Remove the <script>pagination();</script> if you don’t want a infinite scroll.
You have to work with {{pagination}} - see https://ghost.org/docs/themes/helpers/pagination/
You can customize the template by pagination.hbs - see the docs.
Place {{pagination}} into bottom of home.hbs and index.hbs
In the package.json you can configure the posts_per_page
"config": {
"posts_per_page": 12,
"image_sizes": {
I’d avoid changing posts per page. Source has some extra logic around its front page setup that you’ll want to avoid messing up. :)
And iirc, page 2 is going to show the page 1 and 2 posts, and then it should behave normally.
Hmm. Maybe I just don’t have enough posts in my test site. I’ll try it live and just revert if there are issues.
Alright, so here is what I have. I just added {{pagination}} to home.hbs with inline styling to center it. 2 issues: 1) It still is giving me infinite scrolling on page 2 rather than stopping at any point. And, where do I change the styling and text at the bottom? I don’t like the way it looks and want to make it nicer. I promise I’ve scoured the code for the answer so I don’t have to keep coming here!
As I told in my first post, the infinite scroll - the pagination() - only happens when is not the home-template:
if (!document.body.classList.contains('home-template') && !document.body.classList.contains('post-template')) {
pagination();
That is why the issue on page 2 clear, because the body class is <body class="paged ...
Did you try the {{pagination}} in index.hbs too - see Latest Post?
Place {{pagination}} into bottom of home.hbs and index.hbs
I can’t test it, but can cause side effects in /page/x:
Javascript want infinite scroll <=> the template want pagination
Use the Code injection on the Site Header to style the classes:
or you can customize - see Lastest Post
You can customize the template by pagination.hbs - see the docs.
You didn’t answer my question: By the way, I have seen the Events…
Oh, sorry I didn’t see this! No, the events section is a script running from a company called CitySpark. I’m back to working on this today and will try your changes, thanks!
Nicci
OK Now it’s showing pagination controls but doing some weird combo of infinite scrolling and pagination. See here.
Ah turned off infinite scrolling in the js file and it works properly now! Now just to style the controls.
Looks usable and fine!
Thanks for your help!