How to Add Reading Time to Ghost Blog Posts

When you get a visitor to your site, most probably you want them to stay on your website as long as possible and nowadays visitors often want to get as much information as possible by just skimming through a page.

One piece of information that can help to increase the time visitors spend on your site is reading time. The idea behind this is: a visitor will know how much time is needed for obtaining the information by reading a topic of interest.

The logic of reading time is quite simple. Let’s assume that adults average reading speed is 275 words per minute and the article has 1400 words. So the reading time of the article is, total number of words in the article (1400) divided by average reading speed (275), which gives 4 minutes.

In Ghost the logic has a bit more to it, so let's take a look how it is and how this can be used in any Ghost Theme.

Reading time in Ghost

There is a specific helper implemented for this which makes it really easy to add to any theme.

{{reading_time}}

This helper counts the words in the post and calculates an average reading time of 275 words per minute. Ghost also takes into consideration images: for the first image present, 12s is added, for the second 11s is added, for the third 10, and so on. From the tenth image onwards every image adds 3s.

One important information is that the reading_time helper can be used only within the #post context, example:

{{#post}}
  {{reading_time}}
{{/post}}

Advanced reading time settings

The default values the reading_time helper renders:

• x min read for estimated reading time longer than one minute
• 1 min read for estimated reading time shorter than or equal to one minute

But you can actually overwrite that, this is how you can do it:

{{reading_time minute='1 min read' minutes='% mins read'}}

The reading_time helper accepts two parameters:

• minute - you can specify the text that will be rendered when reading time is 1 minute
• minutes - specify the text that will be rendered when reading time is more than 1 minute

With custom texts for your reading time, you might need to have translation for them as well.

Reading time translation

To use translatable text in the reading time helper you can use the {{t }} helper, but in this case we are within another helper so for this to work we have to use the nested helper syntax:

{{reading_time minute=(t '1 min read') minutes=(t '% mins read')}}

Next step is to create the translation file, for this you need a folder called locales in the root folder of your theme. Within the locales folder you can create translations for any language. For example to translate these texts in Italian we need a file called it.json with the following content:

{
  "1 min read": "1 min lettura",
  "% mins read": "% min lettura"
}

Now after restarting Ghost the correct translations should appear.