After creating my custom blog page I wanted to update my homepage to still show my post feed but I also wanted to limit how many posts were shown so you weren't forced to scroll through all of them if you only wanted access to my website's footer and social links. This was a bigger challenge than I realized... until I found the solution!

My Issues

I thought limiting my post count would be a super simple update but I found myself stuck as I found I could limit my post feed if I used a get with a limit and only displayed simple aspects of the post like it's title:

{{#get "posts" filter="tags:-[hash-hide]+feature_image:-null" limit="6"}}
    {{#foreach posts}}
        {{title}}
    {{/foreach}}
{{/get}}

but the second I switched to using the stylings in the {{> "post-card"}} partial it ignored the limit in the get, showed my default number of posts, and loaded the next batch every time I got close to my footer until they had been all loaded.

{{#get "posts" filter="tags:-[hash-hide]+feature_image:-null" limit="6"}}
    {{#foreach posts}}
        {{> "post-card"}}
    {{/foreach}}
{{/get}}

At this time I had just gotten infinite browsing to work on my blog page so although I had noticed forum questions where the solution was to remove the javascript file for infinite browsing from their entire theme I didn't want to do anything so drastic.

Since I have a pro Ghost account I reached out to Ghost support and was told that

There's some JS in Casper that generates the infinite scroll. So long as your posts are wrapped in <div class="post-feed"> the paginated feed of all posts will keep loading.

With this answer I decided to keep the {{> "post-card"}} in to display the posts in my for-loop but removed the post-feed from my div <div class="post-feed"> encircling it all and found the infinite scrolling did stop but now my feed wasn't laid out how I wanted.

At some point in all of this I copied the code from the post-feed partial hoping to solve this and found myself tumbling down a rabbit hole of I don't know frustration. I kept trying things, getting frustrated, rolling the changes back, pausing, procrastinating on other stuff, then going back to fight it again until finally I stumbled across this super simple solution.

The Solution

My solution hit me when I came across Ryan Sechrest’s post Disable infinite scroll in Ghost's Casper theme. This quick one minute read included a code snippet to replaces the infinite scroll with a pagination control and recommended you add it to your site header within the Setting's Site Injection spot. Apparently it was added in the Casper theme 5.4.2 version.

At this time I had just gotten my infinite scroll working on my blog page so rather than have it affect my whole site I instead decided to put the code in my custom homepage's handlebar file, right under the {{!< default}} tag, and it worked beautifully. I was able to show each post with the {{> "post-card"}} tag for the built-in stylings, kept the <div class="post-feed"> around my loop, and was able to limit my feed.

The top of my theme's handlebar homepage now has:

{{!< default}}

<script>
    document.documentElement.classList.add('no-infinite-scroll')
</script>

{{!-- Rest of the code --}}

And I can now limit my post count (here it's six) to use the default styling:

 <div class="inner posts">
    <div class="post-feed mybloghome-posts">
        {{#get "posts" filter="tags:-[hash-hide]+feature_image:-null" limit="6"}}
            {{#foreach posts}}
                {{> "post-card"}}
            {{/foreach}}
        {{/get}}
    </div>
</div>

And with that my homepage's footer was easily accessible in a single (maybe) scroll without needing to go through the entire blog library and I could still hang on to the post feed styling I'm currently unable to duplicate on the blog feed page.

In two screenshots this is what it looks like:

And with that I decided my homepage to blog page conversion was done! I hope these posts help you out and if you know how to duplicate this layout on a non-homepage, like on my blog page, I'd love to hear how. I hope you're having a good day!

If you’re interested in getting any of my future blog updates I normally share them to my Facebook page and Instagram account. You’re also more than welcome to join my email list located right under the search bar or underneath this post.