Move "reading time" under blog title

Site URL: https://www.almendritasabia.com/blog/la-adiccion-es-una-enfermedad

Hello, I added a reading time to my blog posts, thanks to this article I saw online: https://www.maryphilip.com/the-blog/how-to-add-a-reading-time-to-your-squarespace-blog

I don't want to have to add a code block to each single post. So I followed the following instructions:

<div class="reading-time"></div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<script>

$(function () {

    var txt = $("article")[0].textContent,

    wordCount = txt.replace( /[^\w ]/g, "" ).split( /\s+/ ).length;

    var readingTimeInMinutes = Math.floor(wordCount / 228) + 1;

    var readingTimeAsString = readingTimeInMinutes + " min";

    $('article .reading-time').html(readingTimeAsString);

});

</script>

.reading-time {
  text-align: center;
  font-size: 18px;
  font-family: 'Playfair Display'
}

.reading-time:before {
  content: 'Reading Time:';
  margin-right: 3px;
}

My testing result

Thank you soo much! Worked great ☺️

This answer just worked for me too, thank you!

@bangank36 I also used the same code provided by Mary Philip. I'm using Brine and the read time appears at the top of each blog post (above the category and title - not desired but I can live with it) but ALSO above each post in the main gallery blog home page. Do you know how to hide the read time from the gallery view?

6 hours ago, recoveringlazyholic said:

@bangank36 I also used the same code provided by Mary Philip. I'm using Brine and the read time appears at the top of each blog post (above the category and title - not desired but I can live with it) but ALSO above each post in the main gallery blog home page. Do you know how to hide the read time from the gallery view?

Can you share the link to this page so I can take a look?

@bangank36 sure! you'll see there is "1 minute" above each image, which I assume is the estimated time based on the excerpt. https://www.recoveringlazyholic.com/blog

On 3/7/2022 at 5:23 AM, recoveringlazyholic said:

@bangank36 sure! you'll see there is "1 minute" above each image, which I assume is the estimated time based on the excerpt. https://www.recoveringlazyholic.com/blog

Add to Design > Custom CSS

/* hide reading time from list view */
body.view-list .reading-time {
    display: none;
}

@tuanphan Brilliant -- thank you! That worked perfectly. You guys are Squarespace heroes.

Hi everyone - I've just followed these same steps but something isn't working right.

I can see the 'reading time' in the footer of the front page (see attached image) - can someone tell me why this would be happening?

The site is: www.eventplanningtemplates.co

thanks!
Rachella

On 4/26/2022 at 7:08 AM, rachella said:

Hi everyone - I've just followed these same steps but something isn't working right.

I can see the 'reading time' in the footer of the front page (see attached image) - can someone tell me why this would be happening?

The site is: www.eventplanningtemplates.co

thanks!
Rachella

 

 

You added this code to Code Injection

<div class="reading-time"></div>

I think you should add it to Blog Page Page Header

On 4/27/2022 at 5:57 PM, tuanphan said:

You added this code to Code Injection

<div class="reading-time"></div>

I think you should add it to Blog Page Page Header

Thanks for responding.

It still isn't working.

If I take the code out of the Code Injection (Footer) and place it in the BlogPage Header Code Injection  - it shows at the top of the page - see image - and it doesn't show on the blog. If I put the code in Post Blog Item Code Injection then it disappears completely.

I am using Brine template and the instructions were to put this in the general Code Injection.

<!-- Start of Blog Post Reading Time ---------------->
<div class="reading-time"></div>
<script>
$( ".reading-time" ).insertBefore ( "h1.BlogItem-title" );
</script>
<!-- End of Blog Post Reading Time ----------------> 

Hello, I followed the instructions here: https://forum.squarespace.com/topic/207845-move-reading-time-under-blog-title/ to successfully add "reading time" to my blog post. Yay! However, I would also like to add "reading time" to the general blog page. The page that houses all the blogs written. Anyone have any advice on how to this? Thank you so much in advance.

Hi guys, is there a way to add this to the metadata when the blog is viewed in a summary block?  Like this:

Does anyone know how to do this on 7.1? I can't get it to work. I would also like to add it to my titles on my blog home page, if anyone knows how to do that. Thanks!

@SpeedReader26 I have 7.1 and it worked flawlessly.

Two Codes


Add this to the main blog settings > click the gear icon> select advanced > Post Blog Item Code Injection

<div class="reading-time"></div>

Don't forget to save.

Second code:

Website tools > Code Injection > Header:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<script>

  $(function () {

    var txt = $("article")[0].textContent,

        wordCount = txt.replace( /[^\w ]/g, "" ).split( /\s+/ ).length;

    var readingTimeInMinutes = Math.floor(wordCount / 228) + 1;

    var readingTimeAsString = readingTimeInMinutes + " min";

    $('article .reading-time').appendTo('article .blog-item-title');
    
    $('article .reading-time').html(readingTimeAsString);


  });

</script>

That should do the trick.