Reading Time not showing up

Site URL: https://www.thecarolamoon.com/blog/3-surprising-reasons-why-you-may-want-to-show-your-face-in-your-marketing

I've found the super helpful code from Mary Philip (https://www.maryphilip.com/squarespace-tutorials/how-to-add-a-reading-time-to-your-squarespace-blog) and put the code snippets in all the places, but it doesn't show up anywhere on the blog post page...

Can you help please?

@tuanphan can you help me with this?

It appears you've not done step one of the steps. Have you done that step?

@creedon Thank you for your help! I thought I had done Step 1 by:

A) To add to all blogs, go to the Blog’s Page Settings, click Post Blog Item Code Injection and add the following:
<div class="reading-time"></div>

And

B) To add to all, go to Settings > Advanced > Code Injection > Footer and add the following (because I'm using the Brine/Impact template):

<script>
$( ".reading-time" ).insertBefore( "h1.BlogItem-title" );
</script>

What am I missing? I want to add it once to the template for all blog posts, rather than having to manually add it to every blog post on my site...

Quote

What am I missing?

In the instructions it says for the Brine template family to install an alternate piece of code. That code is missing the following line.

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

20 hours ago, creedon said:

In the instructions it says for the Brine template family to install an alternate piece of code. That code is missing the following line.

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

 

YES!!! It works! Yay, thank you @creedon!

Now I just need to figure out how to move the line underneath the category line... Do you know how that works?

@creedon also, I'm finding that the reading time doesn't load at first, and only when I refresh the blog post page – can I somehow force the reading time to load?

5 hours ago, Rolaa said:

Now I just need to figure out how to move the line underneath the category line... Do you know how that works?

I suggest changing the following line from...

$( ".reading-time" ).insertBefore( "h1.BlogItem-title" );

...to...

$( ".reading-time" ).insertAfter( "h1.BlogItem-title" );

Then add an order property/value pair to your CSS.

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

Let us know how it goes.

5 hours ago, Rolaa said:

also, I'm finding that the reading time doesn't load at first, and only when I refresh the blog post page – can I somehow force the reading time to load?

I'm thinking the curse of Ajax Loading strikes again! Try turning off Ajax Loading to see if the problem goes away.

Please note that turning off Ajax Loading will affect the performance of your site. Ajax Loading is designed to increase the loading speed of your site after it first loads.

You have to decide whether the custom code you are trying to use is worth turning off Ajax Loading.

@paul2009 has a great article on the ins and outs of Ajax Loading. Please see Why does Squarespace code only work on refresh?

13 hours ago, creedon said:

I suggest changing the following line from...

$( ".reading-time" ).insertBefore( "h1.BlogItem-title" );

...to...

$( ".reading-time" ).insertAfter( "h1.BlogItem-title" );

Then add an order property/value pair to your CSS.

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

Let us know how it goes.

Thank you heaps, @creedon, this worked a treat! I even moved it one level lower below the category line 😀

13 hours ago, creedon said:

I'm thinking the curse of Ajax Loading strikes again! Try turning off Ajax Loading to see if the problem goes away.

Please note that turning off Ajax Loading will affect the performance of your site. Ajax Loading is designed to increase the loading speed of your site after it first loads.

You have to decide whether the custom code you are trying to use is worth turning off Ajax Loading.

@paul2009 has a great article on the ins and outs of Ajax Loading. Please see Why does Squarespace code only work on refresh?

Yes, you're right, it's the Ajax Loading that effects this. I've for now turned it off so that it shows up. I'll see how I get on... Thank you again for all your help @creedon!

On 6/14/2022 at 2:46 AM, Rolaa said:

Yes, you're right, it's the Ajax Loading that effects this. I've for now turned it off so that it shows up. I'll see how I get on...

I suspect the code could be updated to work with Ajax. You might hit the author up and ask if that is something they would be willing to do.

20 hours ago, creedon said:

I suspect the code could be updated work with Ajax. You might hit the author up and ask if that is something they would be willing to do.

True, that's something that might work out... Thank you @creedon