Read Time attribute not working

Attributes
1

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

Webflow share link is here: Webflow - Flexciton

Everything is set up as it should be.

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

Thanks!
Tristan

2

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

3

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

4

@Support-Luis I’ve used a different script from another developer (Refoukus) 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, 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

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

5

@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.

6

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

7

@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

<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>
8

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 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

9

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?

// 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);
10

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

1 Like