Blog page Readtime
Automatically Calculate and Display Reading Time for Content Sections without using any code. Simply add in the attribute to get the full power of Javascript.
How to add readtime to your Webflow blog
Firstly, make sure you have the VisualDX script before your </body>. Checkout the Quick Start for how to do this.
Add Read-time Article Attribute to Rich Text on CMS Collection Page
Copy this attribute:
Add a Rich Text to your CMS Collection page, and paste the attribute in to the Name input of the Custom Attributes.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Block quote
Ordered list
- Item 1
- Item 2
- Item 3
Unordered list
- Item A
- Item B
- Item C
Bold text
Emphasis
Superscript
Subscript
Add Read-time Time Attribute on CMS Collection Page
Copy this attribute:
Add a Text Block with the text "5 min read" to your page and give the number value a span. Give the span an attribute of vdx-readtime-time
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Block quote
Ordered list
- Item 1
- Item 2
- Item 3
Unordered list
- Item A
- Item B
- Item C
Bold text
Emphasis
Superscript
Subscript
How to add CMS Collection Read Time to another page ie Blob Card
Add a CMS Collection List and connect to the CMS Collection you wish to count the read time
Add a Text Link or a Link Block to the CMS Collection Item. In the Text Link Settings choose the purple Collection page link option and choose Current Item
Add Read-time Link Attribute to Webflow Link
Copy this attribute:
Add a CMS Collection List and connect to the CMS Collection you wish to count the read time
Add a Text Link or a Link Block to the CMS Collection Item. In the Text Link Settings choose the purple Collection page link option and choose Current Item
Add Read-time Time Attribute to Text Span
Copy this attribute:
Add a Text Block with the text "00 Read Time" to your Collection Item and give the number value a Text Span. Paste the attribute in the Name Input of the Custom Attributes.
Publish
Demo
An example of the Readtime feature in action
Ensuring Accessibility with JavaScript in Webflow
Accessibility is essential for reaching all users. This article discusses how to ensure accessibility when using JavaScript in Webflow.
Understanding Accessibility
Accessibility involves making your website usable for people with disabilities. JavaScript can impact accessibility if not used correctly.
Best Practices for Accessible JavaScript
Ensure that all interactive elements are keyboard accessible and provide alternative text for dynamic content.
"Accessibility is not just a feature; it's a necessity."
Testing for Accessibility
Use tools to test your website's accessibility and make necessary adjustments.