RichText Data Source πŸ§ͺ

Convert Rich Text into a datasource, based of certain profile rules

REQUEST FOR COMMENT ( RFQ ) This SA5 feature is in the RFQ stage. We're gathering community feedback in the forum and will consider the implementation details here before we progress.

In certain specific scenarios, site designs need a convenient content source with the following shape;

  • A title

  • A rich text chunk

    • with support for images, videos, lists, etc.

We would then use this list of chunks to create an accordion FAQs section as part of a blog article, or a set of tabs in a lesson section.

Goals

  • Full static content and CMS compatibility

  • Simple administration, easy for clients to understand

    • Easy to add/remove

    • Easy to re-order content. These chunks need to be orderable so that the content admin can give them a specific sequence.

    • Easy access. Ideally, the entire set of chunks would be stored within a CMS item, so that they are directly and explitly part of a blog or article.

  • Flexible in its ability to apply to certain UX scenarios

Use Cases

Here are some examples of specific UX's we currently have in mind as target use cases to support;

  • FAQs. A serious of accordions presented with a title, and expandable accordion and a content area.

  • Tabs. A serious of dynamic tabs with simple rich text content, easy to order

And possibly...

  • Footnotes. In a large blog or news article, the ability to define footnotes as content that is directly attached to the Blog entry.

Technical Concept

One of the most appealing approaches we've considered is to leverage Webflow's rich text element and use Headings as the item-separating mechanic.

  • The entire set of titles and rich text chunks would be stored in a single rich text field or element.

  • Headings like H1, H2, H3, etc. would be processed as the separator and the title, and content in-between headings would be processed as rich text content

    • By default, delineation would occur at all headings, however we may allow for a heading level, e.g. H1's and H2's denote the start of a chunk, H3's+ are part of an item's rich text content.

Rendering

The idea then would be to use this shaped datasource as a source for an SA5 Repeater lib, which can then pull and bind those content pieces.

It may be beneficial to support other rich text-source parsers;

  • Parse all media only, including images, video, multimedia

    • Including captions

  • Generate a mixed-media lightbox or gallery

Or;

  • Parse lists and use as list content

  • Parse paragraphs and use as list content

Last updated

Was this helpful?