Add links to "previous" and "next" posts in "Post" template (Ghost)?

Question

I am using Ghost to write and publish a blog. In the blog post view, I'd like to display links to "previous" and "next," linking to first earlier and later published posts, respectively. Ideally, I'd be able to fetch more than just URLs, so that I can display more metadata in these link blocks — e.g. image and title.

I am aware Ghost API comes with Utility helpers but have no idea how to make them work in Webstudio. 🤷‍♂️

Oleg Isonen · Answer

@John Siciliano has probably looked into it, would be a good idea to add that to the template in the marketplace

John Siciliano · Answer

I just looked at the docs and I don't think this is possible.

There is no built in previous and next based on the current post so the next thing would be making a request to get all posts, determining where the current slug is in the list of all, and then getting the previous and next — but this would require custom code and once you go custom in the UI, you can't go back to the UI. Ie. you'd have to design those before and after links/posts using custom code

Davor · Answer

Oh wow, that's disappointing, but good to know. Thanks for looking into it, @John Siciliano 🙏

John Siciliano · Answer

Alternatively you can do "other posts" and make a request to get say the three newest ones exluding the current one. Or you can tag featured posts and get those but exluce the current one

Oleg Isonen · Answer

asked gpt, it gave me this:const apiUrl = 'https://your-ghost-blog-url.com/ghost/api/content/posts/';
const apiKey = 'your-content-api-key'; async function getNextPost(currentPostId, currentPostDate) { const response = await fetch(`${apiUrl}?key=${apiKey}&filter=published_at:>${currentPostDate}&limit=1&order=published_at asc`); const data = await response.json(); return data.posts[0]; // This will be the next post
} // Example Usage
const nextPost = await getNextPost(currentPostId, currentPostDate);
console.log('Next Post:', nextPost);basically fetch posts after the date of the current post, limit to 1, which will give you the next post

Oleg Isonen · Answer

one can also specify the exact fields, to avoid fetching the entire next post:

Plain Text

    const response = await fetch(`${apiUrl}?key=${apiKey}&filter=published_at:>${currentPostDate}&fields=slug,url&limit=1&order=published_at asc`);

Davor · Answer

Thanks, Oleg! I'd done some research with Perplexity before posting here, and got a similar response. A huge issue for me is taking this information and implementing it in Webstudio, but this kinda gave me hope something could be done 🙂

John Siciliano · Answer

The only part that matters in the code what's in fetch which is eseentially the same thing as our URL field in resources

John Siciliano · Answer

`${apiUrl}?key=${apiKey}&filter=published_at:>${currentPostDate}&limit=1&order=published_at asc`

John Siciliano · Answer

Oh wait. Current date depends on the current post

John Siciliano · Answer

Resources can't depend on eachother

John Siciliano · Answer

So I don't think this will work

Oleg Isonen · Answer

what's the url of the post, maybe there is a different filter that canbe used

Oleg Isonen · Answer

like current post id

Oleg Isonen · Answer

looks like you can't fetch next post using current post id or slug

Oleg Isonen · Answer

that's unfortunate, this will indeed require a separate backend or us adding at some point a way to do sequencial requests and let them depend on each other

Oleg Isonen · Answer

alternative could be adding a date to the url on each post and use that date to find next

Join the Webstudio community

Add links to "previous" and "next" posts in "Post" template (Ghost)?