# Read Time attribute not working

**URL:** <https://forum.finsweet.com/t/read-time-attribute-not-working/1850>\
**Category:** Attributes\
**Created:** [August 30, 2023, 12:45pm UTC](https://forum.finsweet.com/t/read-time-attribute-not-working/1850 "2023-08-30T12:45:54Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![tristanpringle](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.finsweet.com/tristanpringle/32/961_2.png) [@tristanpringle](https://forum.finsweet.com/u/tristanpringle)\
**Post date:** [August 30, 2023, 12:45pm UTC](https://forum.finsweet.com/t/read-time-attribute-not-working/1850/1 "2023-08-30T12:45:54Z")

</div>

Hey there,

The Read Time attribute isn’t working on the blog pages of this site: [Flexciton | Blog & News | Autonomous Scheduling: A Tale of Three Taxis](https://flexciton.webflow.io/blog-and-news/autonomous-scheduling-a-tale-of-three-taxis)

Webflow share link is here: [Webflow - Flexciton](https://preview.webflow.com/preview/flexciton?utm_medium=preview_link&utm_source=designer&utm_content=flexciton&preview=fc398dc1aa821158d98c5b459ef73357&pageId=6491ce8571a8dcacc2b3c75d&itemId=6491ce8571a8dcacc2b3c854&workflow=preview)

Everything is set up as it should be.

Anyone spot what’s going on or is this a known issue?

Thanks!  
Tristan

---

<div class="post-metadata">

**Author:** ![tristanpringle](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.finsweet.com/tristanpringle/32/961_2.png) [@tristanpringle](https://forum.finsweet.com/u/tristanpringle)\
**Post date:** [September 1, 2023, 8:39am UTC](https://forum.finsweet.com/t/read-time-attribute-not-working/1850/2 "2023-09-01T08:39:58Z")

</div>

The attribute was working before so this looks like a bug?  
Can anyone help with this?

---

<div class="post-metadata">

**Author:** ![Support-Luis](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.finsweet.com/support-luis/32/53_2.png) [@Support-Luis](https://forum.finsweet.com/u/Support-Luis)\
**Post date:** [September 3, 2023, 8:34am UTC](https://forum.finsweet.com/t/read-time-attribute-not-working/1850/3 "2023-09-03T08:34:29Z")

</div>

Hey @tristanpringle! Where are you experiencing this? It works fine on my end 🙂

---

<div class="post-metadata">

**Author:** ![tristanpringle](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.finsweet.com/tristanpringle/32/961_2.png) [@tristanpringle](https://forum.finsweet.com/u/tristanpringle)\
**Post date:** [September 5, 2023, 9:21am UTC](https://forum.finsweet.com/t/read-time-attribute-not-working/1850/4 "2023-09-05T09:21:33Z")

</div>

@Support-Luis I’ve used a different script from another developer ([Refoukus](https://www.webflow-tools.refokus.com/tools/time-to-read)) for the blog page, as the Finsweet one wasn’t working.

The script from them doesn’t work on the CMS collection on [this page](https://www.flexciton.com/blog-and-news), so I removed the read-time from those temporarily.

I’ve added the Finsweet attributes to the Blog gallery page again here: [Flexciton | Blog & News](https://www.flexciton.com/blog-and-news)

The same issue is happening where the read-time is the same for every blog post card (4 mins).

The Webflow share link is [here](https://preview.webflow.com/preview/flexciton?utm_medium=preview_link&utm_source=designer&utm_content=flexciton&preview=fc398dc1aa821158d98c5b459ef73357&pageId=6491ce8571a8dcacc2b3c757&workflow=preview)

---

<div class="post-metadata">

**Author:** ![Support-Luis](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.finsweet.com/support-luis/32/53_2.png) [@Support-Luis](https://forum.finsweet.com/u/Support-Luis)\
**Post date:** [September 5, 2023, 10:54am UTC](https://forum.finsweet.com/t/read-time-attribute-not-working/1850/5 "2023-09-05T10:54:00Z")

</div>

@tristanpringle the issue comes from not having different suffixes per blog post. You must add the suffix to the Attribute values either by Webflow’s dynamic attributes or code.

These would be `time` with its `contents`, `time-2` with its corresponding `contents-2` and so on.

---

<div class="post-metadata">

**Author:** ![tristanpringle](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.finsweet.com/tristanpringle/32/961_2.png) [@tristanpringle](https://forum.finsweet.com/u/tristanpringle)\
**Post date:** [September 5, 2023, 3:11pm UTC](https://forum.finsweet.com/t/read-time-attribute-not-working/1850/6 "2023-09-05T15:11:48Z")

</div>

Hi @Support-Luis, that makes sense, could you suggest possibly how I’d add the suffix to the attribute dynamically with code?

---

<div class="post-metadata">

**Author:** ![Support-Luis](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.finsweet.com/support-luis/32/53_2.png) [@Support-Luis](https://forum.finsweet.com/u/Support-Luis)\
**Post date:** [September 6, 2023, 7:41am UTC](https://forum.finsweet.com/t/read-time-attribute-not-working/1850/7 "2023-09-06T07:41:16Z")

</div>

@tristanpringle sure! You’ll need to add this tag to the Read Time script `defer fs-attributes-preventload='true'`.

I see you already had a script loading the script on each page change, please replace it with this script

```auto
<script>
  function loadReadtime() {
    // Get all elements with the attribute fs-readtime-element="time"
    const readTimes = document.querySelectorAll('[fs-readtime-element="time"]');
    const contents = document.querySelectorAll('[fs-readtime-element="contents"]');

    // Iterate through the elements and add a suffix
    readTimes.forEach((time, index) => {
      const currentSuffix = index === 0 ? '' : `-${index + 1}`;
      time.setAttribute('fs-readtime-element', `time${currentSuffix}`);
    });

    // Iterate through the elements and add a suffix
    contents.forEach((content, index) => {
      const currentSuffix = index === 0 ? '' : `-${index + 1}`;
      content.setAttribute('fs-readtime-element', `contents${currentSuffix}`);
    });

    window.fsAttributes.readtime.init();
  }

  window.fsAttributes = window.fsAttributes || [];
  window.fsAttributes.push([
    'cmsload',
    (listInstances) => {
      // The callback passes a `listInstances` array with all the `CMSList` instances on the page.
      const [listInstance] = listInstances;

      loadReadtime();

      // The `renderitems` event runs whenever the list renders items after switching pages.
      listInstance.on('renderitems', (renderedItems) => {
        loadReadtime();
      });
    },
  ]);
</script>

```

---

<div class="post-metadata">

**Author:** ![tristanpringle](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.finsweet.com/tristanpringle/32/961_2.png) [@tristanpringle](https://forum.finsweet.com/u/tristanpringle)\
**Post date:** [September 6, 2023, 8:20am UTC](https://forum.finsweet.com/t/read-time-attribute-not-working/1850/8 "2023-09-06T08:20:48Z")

</div>

Thanks so much @Support-Luis, the update to that script has fixed it on the blog index/gallery page, but the ‘related’ blogs on the article page [here](https://flexciton.webflow.io/blog-and-news/a-is-for-ai) are still not playing nice.

I tried adding a ‘time-2’ and ‘contents-2’ attribute to those related articles but no dice.

Have also switched back to Finsweet’s Read-time attribute and deleted the Refokus one.

Anything you can spot? Appreciate your help!

The share link is [here](https://preview.webflow.com/preview/flexciton?utm_medium=preview_link&utm_source=designer&utm_content=flexciton&preview=9418687940b9dbb82e87a4433d13f0ce&pageId=6491ce8571a8dcacc2b3c75d&itemId=6491ce8571a8dcacc2b3c854&workflow=preview)

---

<div class="post-metadata">

**Author:** ![Support-Luis](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.finsweet.com/support-luis/32/53_2.png) [@Support-Luis](https://forum.finsweet.com/u/Support-Luis)\
**Post date:** [September 6, 2023, 8:30am UTC](https://forum.finsweet.com/t/read-time-attribute-not-working/1850/9 "2023-09-06T08:30:56Z")

</div>

Yes, for the original solution, we are using the CMS Load callback which fires after all items have been rendered on the page. In this case, we have no CMS Load setup.

Can you try this instead?

```auto
// Define the function
function loadReadtime() {
    // Get all elements with the attribute fs-readtime-element="time"
    const readTimes = document.querySelectorAll('[fs-readtime-element="time"]');
    const contents = document.querySelectorAll('[fs-readtime-element="contents"]');

    // Iterate through the elements and add a suffix
    readTimes.forEach((time, index) => {
        const currentSuffix = index === 0 ? '' : `-${index + 1}`;
        time.setAttribute('fs-readtime-element', `time${currentSuffix}`);
    });

    // Iterate through the elements and add a suffix
    contents.forEach((content, index) => {
        const currentSuffix = index === 0 ? '' : `-${index + 1}`;
        content.setAttribute('fs-readtime-element', `contents${currentSuffix}`);
    });

    window.fsAttributes.readtime.init();
}

// Run the function when the window is loaded
window.addEventListener('load', loadReadtime);

```

---

<div class="post-metadata">

**Author:** ![tristanpringle](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.finsweet.com/tristanpringle/32/961_2.png) [@tristanpringle](https://forum.finsweet.com/u/tristanpringle)\
**Post date:** [September 6, 2023, 8:39am UTC](https://forum.finsweet.com/t/read-time-attribute-not-working/1850/10 "2023-09-06T08:39:03Z")

</div>

@Support-Luis that’s fixed it, works a charm now! Thank you!!