HubSpot CMS

Add Reading Minutes to Blog Post

A way to adding the reading minutes for each of your HubSpot blog posts.

Created by: ericsalvi

Tags: Blog

Unverified
?

After receiving a minimum of 25 recommendations, an entry earns the "Community Approved" badge.

Please keep in mind, all entries are community created and may not be fully supported by HubSpot.

6 Recommendations

View on:

GitHub

HTML + HUBL
          
            {% set initialPostWords = content.post_body|wordcount %}
{% set calculatedPostWords = (initialPostWords/100) * 100 %}
{% set finishedPostWords = calculatedPostWords|divide(300)|round(2) %}
{% set number = finishedPostWords|round %}
{% if number < 1 %}
 
{% else %}
  {{ finishedPostWords|round }} minute read
{% endif %}

          
        
CSS
          
            /* You will need to create your own CSS to match your sites look and feel. */

          
        
JS
          
            // No JS Required. All done through HubSpots HubL

          
        
Have Questions?

Ask technical questions in Slack.

HubSpot Developer Slack

Not a member yet? - join here
READ ME (VIEW IN GITHUB)

Add Reading Minutes to Blog Posts

A way of displaying the reading minutes for each of your HubSpot blog posts.

The Instructions

To display the reading minutes for each of your blog posts, you will want to add

{{ content.post_body|wordcount|divide(300) }} inside of the {% for content in contents %} section.

The Breakdown

The first part, content.post_body is gathering all of the information from the post body. Pretty straightforward. Then appending the filter wordcount is telling us to get the total number of words in the post body. After that I then added divide(300) which will divide the wordcount by 300. Through seaching the Interent I found that the average adult human reads approximately 300 words per minute.

The Why

The above code is the basis of how I came up with this snippet. I saw popular social platforms achieving this type of feature and wanted to replicate it in HubSpot. I had a good grasp on HubL for the blog markup and knew that if I were to come up with this same feature in HubSpot, I should be able to match it through HubL filters. However, through testing I realized that it was not rounding properly so an 899 word count for a blog post on paper would give us a result of 3 (899/300) but in actuallity it yeilded 2. I knew something was wrong. I had to come up with a better solution using my base code.

The Updated Code

{% set initialPostWords = content.post_body|wordcount %}
{% set calculatedPostWords = (initialPostWords/100) * 100 %}
{% set finishedPostWords = calculatedPostWords|divide(300)|round(2) %}
{% set number = finishedPostWords|round %}
{% if number < 1 %}

{% else %}
  {{ finishedPostWords|round }} minute read
{% endif %}

Add these 8 lines of code in place of the initial one. What this will do is always round to the nearest 100. There also is a condition that if the final number is less than 1, It will not display anything. I felt that seeing 0 minute read is not good for business.

The only way you could get a 0 in these results would be if you have less than 150 words in your post or you have an infographic or video instead of text.

Please Note

This will require you to make it look nice by using CSS. This snippet is only to get the foundation code present on your blog.

My original article was published on the HubSpot Community.

 
6 Recommendations

Contribute to the Gallery!

We bet you’ve coded some amazing stuff. Showcase them and help the community grow.

Contribute

Other Open Source Projects

Browse all other open source projects

CrankShaft Framework

A modern framework for accelerating build times on the HubSpot CMS. Based on a modified Bootstrap 4 framework.

Lead developers: Jon McLaren

Developer Chrome Extension

Chrome/Chromium extension for HubSpot CMS Developers that adds a developer menu, dark theme and useful shortcuts to commonly used HubSpot query parameters, resources, and tools for making HubSpot Development easier and more enjoyable.

Lead developers: Jon McLaren , William Spiro , Gonzalo Torreras

VS Code HubL Language Extension

This extension enables super fast local development of CMS pages, and is a great compliment to using the new local HubL server. It contains comprehensive HubL tag, function, filter and expression test auto-complete snippets, as well as their documentation.

Lead developers: William Spiro

Not coding on HubSpot CMS yet?

We invite you to explore why thousands of developers LOVE coding with HubSpot!

Contribute
Made with  by community members: InboundLabs.co