00:00:00
Sponsor
For the Blog
Blog card - Readtime
Automatically Calculate and Display Reading Time for Blog card without using any code. Simply add in the attribute to get the full power of Javascript.
Demo
Instructions
Make sure you have the VisualDX script in your <head>. Checkout the Quick Start for how to do this.
1
Add a rich-text-field to your blog page, and give it an attribute of vdx-readtime-article
Rich Text
Custom Attributes
Name
vdx-readtime-article
Value
2
Add a CMS collection, connect it to your blog, and build out your card.
3
Add a text-field with the text "5 min read" to your blog card and give the number value a span. Give the span an attribute of vdx-readtime-time
Span
Custom Attributes
Name
vdx-readtime-time
Value
4
Add vdx-readtime-link to the custom attributes of the card link to your blog page or collection page
Link
Custom Attributes
Name
vdx-readtime-link
Value
5
Publish your site to staging and test out both the styles and the behaviour.