How can we create a "read more stories like this" without tagging the same content?

Developer help
1

Hi there!

Oftentimes with editorial sites, you want to show “articles like this” one at the bottom. So people can get into a flow of reading more. Harvard Business Review does this. And a ton of blogs do this.

We want to do this! But how can you do this with Ghost?

Here is an example on our staging site:

https://staging.sphere.coach/blog/why-i-started-a-technology-company-for-coaching

Here is another example (for good measure):

https://staging.sphere.coach/blog/how-this-overworked-chef-prioritized-self-care-and-still-managed-to-rise-to-success

We tagged the category of the post. But then the same post shows up at the bottom. So someone will click that post and read the exact same one…

Would love any Guidance!

2

There’s a tutorial written for exactly what you’re after:

https://ghost.org/tutorials/related-posts-block/

Might be more in that tutorials directory that you’d be interested in as well :slightly_smiling_face:

4 Likes
3

Thank you so much!! :pray:

4

I was looking for the related posts block tutorial but it seems to be gone… I’ll keep digging around but open to advice if anyone has any.

5

Here’s an archive.org capture of the page. Although it’s possible the tutorial was taken down because there’s been breaking changes to Ghost affecting this, I don’t recall any such thing. Probably a good idea to run your theme through GScan afterwards just to make sure.

6

Thanks so much, I’ll check that out. I did see that there is now a related-posts.hbs file - so maybe it’s built in… Bookmarking GScan, too - I’m v new at all this but that looks helpful. :)

7

It’s not something included by default, but it can be added to any theme if it’s not there.

Here’s how we do it in the Ruby theme (but this same technique is applicable anywhere)

And here’s the key line from that file: filter="tags:[{{post.tags}}]+id:-{{post.id}}"

The first part — tags:[{{post.tags}}] — grabs posts with the same tags, and the second part — id:-{{post.id}} — tells Ghost not to get the same post as the current one.

1 Like
8

It looks like it’s filling in automatically with the Headline theme but I haven’t tested it extensively or at all.

9

Yep, Headline theme does it out of the box, so nothing you need to do on your end!

2 Likes
10

Hi! Following up on this… it seems like my related posts section keeps showing the same stories over and over - even though I have newer stories with the tag. I don’t know if it’s automatically showing maybe… the highest-pageview stories or if something else is going on. Not sure what might need tweaking or if this is something I can do in Github? I guess my preferred behavior would be to show the most recent posts from the primary tag - other than the new story itself. … I’m not sure why this isn’t the default but if there’s a tweak to make it so, I would love to know what it is!

11

The filter you use on the block does all the heavy lifting, if you’re using the one from this thread it’s this:

filter="tags:[{{post.tags}}]+id:-{{post.id}}"

This filter looks for posts with tags matching the list of tags on the current post, excluding the current post. The API makes an assumption about this query and switches the default ordering from reverse chronological to ordering by the number of matching tags i.e. by most relevant / most related.

It’s a little bit of magic, but for most people, it’s what they want when using this filter… so it “just works” and noone questions it :slight_smile:

It sounds like actually you might be looking for the next and previous post helpers, which can be scoped to a primary tag:

Alternatively, if you do want to have the existing related-by-tag query, but change the order back to reverse chronological, you can do that by adding an order attribute to the get helper e.g. order="published_at desc", which is documented here:

You can also change the filter to look for tags matching the primary tag instead of all tags.

1 Like