How to include "reading time" to blog posts?

1

Hi,

actually spending much time to get my grav blog working. So i installed the reading time plugin, but cant figure out clearly how to include it in blog posts.

Would appreciate help very much.

2

Hi @yFStein, it looks like you need to add a bit of Twig to the relevant template used (in your case a blog post):

If you tell me the theme you are using I might be able to help you with that.
Paul

1 Like
3

Hi @paulhibbitts, i’m using Striped. It would be very nice if the reading time stands also on the blog list on the view of every post and also in the blog post.

But unfortunately I can’t do anything with Twig^^

Its would be very nice to get the striped like in the screenshot of it :smiley:

4

You will need to make small changes to Twig files in order to do that @yFStein. For example, to add reading time to the blog post listing page you would edit the blog_item.html.twig file. Here is an example of such an edit to get you going:

    <header>
        {% if page.header.link %}
            <h2>
                {% if page.header.continue_link is not sameas(false) %}
                    <a href="{{ page.url }}"></a>
                {% endif %}
                <a href="{{ page.header.link }}">{{ page.title }}</a>
            </h2>
            {% else %}
            <h2><a href="{{ page.url }}">{{ page.title }}</a></h2>
        {% endif %}
        {% if page.header.description %}
        <p>{{ page.header.description }}</p>
        {% endif %}
        {{ page.content|readingtime }}
    </header>

To make sure any Twig modifications are not overwritten with future theme updates, you also should set up an inherited theme:

Hope the above helps.
Paul

5

Hi @paulhibbitts, i got another solution which is working a bit better and looks better, but u put me up to it.

Here it is:

{% if page.header.author %}    
<span class="list-blog-author">
	<i class="fa fa-user"></i>
	{{ page.header.author }}
</span>
<br /><br />
{% endif %}

<span class="list-blog-author">
	Lesezeit: {{ page.content|readingtime }}
</span>
<br /><br />

{% if page.taxonomy.tag %}
<ul class="tags">
	<i class="fa fa-tag"></i>
	{% for tag in page.taxonomy.tag %}
	<li><a href="{{ base_url }}/tag{{ config.system.param_sep }}{{ tag }}">{{ tag }}</a></li>
	{% endfor %}
</ul>
{% endif %}

So i got the

double time cauz on mobile and on desktop its look terrible cauz the lines cutting itself. So its looks better.

Also i got the reading time in a span with class (for the look) from the author.

Now i would rlly prefer that stands their “9 Min 38 Sek” and not “9 MINUTES 38 SECONDS”. You know how? :slight_smile:

Another question to this:
Is their a way to show the tags from taxonomy among each other? Cauz this looks also absolute terrible when its cutting the tags. Would look better if its looks like this:

"tag_fontawesome_symbol" Tags:
- Tag One
- Tag Two
- Tag Three
6

Glad you got something going you like @yFStein!

Re: taxonomy display do not know that. Looks like there might be some display options via the Plugin usage: https://github.com/getgrav/grav-plugin-readingtime#initial-setup

7

I gotta changed:

Lesezeit: {{ page.content|readingtime }}

to

Lesezeit: {{ page.content|readingtime({'minutes_label': 'Min', 'minute_label': 'Min', 'seconds_label': 'Sek', 'second_label': 'Sek'}) }}

But their no changes :confused: (yes, synced (checked via ssh) and cleared cache)

//Edit
Found this on the Issue page of the plugin:

But dont know how to use the workaround from " mrNo0b"

8

I think you would do this following:

  1. locate the file languages.yaml in the folder for the Reading Time Plugin
  2. copy that file to your active theme folder (Striped for you I think)?
  3. for your chosen language, edit the text strings for seconds etc

Please let me know if that in fact works🙂

9

7 posts were split to a new topic: Add readingtime to each blog item in blog list