Are you wondering how to get users to read more of your content? Well, one effective method to achieve this is by using Related Posts in Ghost. This feature recommends relevant content to your audience, keeping them engaged and interested. When it comes to having a successful blog or website, it is essential to keep your readers engaged and interested in your site. By offering relevant information, you can increase the likelihood of readers staying on your site longer and exploring more of your content.
Today we will show the process of showcasing similar content, improving user experience, and increasing overall engagement if you use the popular Ghost publishing platform. Through the process, we will use Content API and get helper provided by Ghost cms.
Show Related Posts in Ghost
The Below code snippet fetches related posts based on your primary tag and showcases your related content to your readers. This is a very simple process to get related posts in ghost blog website.
{{!-- Related Posts --}}
{{#get "posts" include="tags,authors" limit="3" filter="id:-{{id}}+tag:{{primary_tag.slug}}" as |related|}}
<section class="related-posts">
<h3 class="related-title">{{t "Recommended for you"}}</h3>
{{#foreach related}}
// post layout
{{> post-card}}
{{/foreach}}
</section>
{{/get}}
Above Code Explanation:
To understand the code properly you can read the table below.
| No. | Tags | Explanation |
|---|---|---|
| 1 | {{!– Related Posts –}} | This is a Handlebars comment that marks the beginning of the related posts section. |
| 2 | {{#get "posts"...}} | This line sends an API request to the Ghost API to fetch related posts. It includes tags and authors data, limits the result to 3 posts, and filters out the current post and includes posts with the same primary tag. |
| 3 | <section class="related...> | This opens an HTML section with the class "related-posts" to contain the related posts. |
| 4 | <h3 class="related-title"> | This displays a heading for the related posts section. The text is translated using Ghost's translation system. |
| 5 | {{#foreach related}} | This starts a loop to iterate over each related post in the related array. |
| 6 | // post layout | This is a comment indicating where you would typically define the layout for each related post. |
| 7 | {{> post-card}} | This includes a Handlebars partial post-card for each related post, representing the layout and content. |
| 8 | {{/foreach}} | This ends the loop over the related posts. |
| 9 | </section> | This closes the HTML section for the related posts. |
| 10 | {{/get}} | This closes the get block helper, marking the end of the related posts section. |
Advanced post filtering option in Ghost Blog
In order to have more control over the results, you can use the advanced post-filtering option with the get helper in your ghost theme. In addition to the previous conditions, let's say we want to display 3 related posts that are also featured. To achieve this, you can modify the code as follows:
Show Featured Posts in Related Section
If you want to show your featured post in the related section then you need to follow the below code.
{{!-- Advanced post filtering --}}
{{#get "posts" include="tags,authors" limit="3" filter="id:-{{id}}+tag:{{primary_tag.slug}}+featured:true" as |related|}}
<section class="related-posts">
<h3 class="related-title">{{t "Recommended for you"}}</h3>
{{#foreach related}}
// post layout
{{> post-card}}
{{/foreach}}
</section>
{{/get}}
The filter parameter is updated to include an additional condition for featured: true. This ensures that only featured posts will be included in the related posts list.
Show Images posts in the related section
If you also want to display only posts that have an image, you can include the condition feature_image:-null to filter out posts without a featured image. The updated code will look like this:
{{!-- Advanced post filtering --}}
{{#get "posts" include="tags,authors" limit="3" filter="id:-{{id}}+tag:{{primary_tag.slug}}+featured:true+feature_image:-null" as |related|}}
<section class="related-posts">
<h3 class="related-title">{{t "Recommended for you"}}</h3>
{{#foreach related}}
// post layout
{{> post-card}}
{{/foreach}}
</section>
{{/get}}
The filter parameter is updated to include the condition feature_image:-null. This ensures that only posts with a featured image will be included in the related posts list.
To Sum Up
As you've observed, there are many ways to limit the filter to the final outcome, I hope you can able to do this process with your ghost blog. You can apply different criteria to get the desired results in different situations. That's all for now! I hope this tutorial makes you happy to show relevant posts on your ghost blog website.
