Ghost is an open-source platform for creating and managing online blogs or publications. In ghost blog readers engaging with an article, they should know how much time they should afford to spend on it. That’s why I decided to provide a reading time estimate on my blog. It will take around 4 minutes to read this post and figure out how I did it.

Since Ghost 1.17.0, a reading time assistance has been included (see this page). I currently use this tool on my website to figure out the average reading time of my articles. However, the technique described here stays relevant even using a platform other than Ghost or an older version of Ghost.

How fast average reader take time in the text?

Before we get too technical and begin inserting scripts into webpages, we need to know how fast the average (adult) person reads.

In 2012, a study observed the speed with which participants read aloud. They also discovered that typical reading speed differs by language. The average for English, the language of this blog, is nearly 228 (30) words per minute (Table 2 in the article). This is the number we will utilize later in our computations.

Ghost blog

Reading time in Ghost blog

There is a particular helper for this that makes it extremely simple to add to any ghost blog theme.

 {{reading time}}

This assistant counts the words in the article and computes an average reading speed of 275 words per minute. Ghost blog also considers images: for the first image, 12s are added, for the second, 11s are added, for the third, 10, and so on. Every image after the tenth adds three seconds.

One essential note is that the reading time helper can only be used within the the #post context, example:

#post context, as in:

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

Advanced reading time settings

The reading time helper provides the following default values:

  • x min read for reading times greater than one minute
  • 1 minute read for a reading duration estimated to be less than or equal to one minute

But you can actually overwrite that, and here’s how:


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

The reading time helper takes two arguments

  • minutes – You can define which text will be displayed when the reading time is 1 minute.
  • minutes – provide the text that will be rendered if the reading time exceeds one minute.

When it comes to custom texts for your reading time, you may need to have translation as well.

Please keep in mind that the page you want to change is the one that displays the text of your ghost blog. The file you'll be looking for in Ghost is named post.hbs, and it's the page I'll be updating in this example.

Translation of reading time

To use translatable text in the reading time helper, use the t helper; however, because we are within another helper, we must use the nested helper syntax:

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

The 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 into 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. After that, if you want to add some extra styling to the reading-time class in your CSS to make it fit in with the rest of your website. Moreover, if you want a premium ghost theme for your ghost blog, check out our best collections here ➡ themeix.com

Leave a Comment

No Comment