Blog Reading Timer

Design help CMS
21

Hey, unfortunately I tried @Fonsume 's edit from Sept '21 but it didn’t work, so I ended up just using the timer on the blog post page only, not the blog preview collection list.

22

Yeah, i did so too! :thinking: thanks anyway for responding!

1 Like
23

Thank you @Fonsume for the tool. Love it!

24

Love these native solutions!

If you happen to be using Airtable to create / host your CMS content, there is an easy formula that you can create to divide the number of words in your blog post field by the average reading time (subjective, but in this example, I’ve used 238). Then, you would just need to map the Reading Time field in Airtable to the Reading Time field in Webflow.

image
image966×802 64.3 KB

I also posted this on Twitter.

1 Like
25

Here is code that let you calculate the reading time:

var Webflow = Webflow || [];
Webflow.push(function () {
    const richText = document.querySelector(".richtext-class")
    const timeElement = document.querySelector(".reading-time")
    
    function readingTime() {
      const text = richText.innerText
      const wpm = 225
      const words = text.trim().split(/\s+/).length
      const time = Math.ceil(words / wpm)
      timeElement.innerText = time
    }
    
    readingTime()
});
1 Like
26

Doesn’t work — gives this error ↓

image
image735×102 7.01 KB

27

See if it helps, a more comprehensive reading time counter solution:

GitHub - hypestudiox/readtimecounter: Reading Time Counter that supports Eng, CKJ and image contents.

https://cdn.jsdelivr.net/gh/hypestudiox/readtimecounter/readtime.js

2 Likes
28

Hey anthonychan2509

Is it possible to link the read time of a collection page and display it on a index page, so blog index displaying snippets of each blog item to show read time of its linked blog collection page?

Thanks
Mike

32

Hey Michael, this is old, but just saw it.
If you still need to set this up, the best way is to;

  • Add a read time field to the CMS, I prefer numeric, as minutes
  • Setup an automation ( Make .com works well ), which triggers when your blog articles are updated. It will look at the main richtext content field and do a readtime calculation, and push it into your numeric field.
  • You now have this info client side and it will update automatically when you make edits or post new articles.
  • Client side, write a bit of JS to convert your N mins to the display format of your choosing, whatever that is… 43 mins, 1 hour, 28 mins. “two cups of coffee”…

The numeric field approach adds a bit of client side work but it creates some nice UX options around sorting and filtering your posts, and even styling / categorizing them e.g. “quick reads < 5 mins”…

Note, I don’t remember encountering a feedback-loop issue but I’d put in a safety check, if the time you’ve calculated is the same as the time already on the record, then don’t update it. It’s possible that a CMS update call would re-trigger the updated webhook, etc. I’ve not tested v2 API behavior here.