A replacement for the Wagtail richtext filter to use with a css framework.
Project description
Wagtail F Richtext
An alternative Wagtail richtext
filter.
Parse the HTML content from a RichTextField or RichTextBlock in the same way that the Wagtail richtext filter works.
Optionally add an argument to specify either in-line styles or css framework classes to be injected to style the inner content.
Use your own custom css classes or one the many other utility-first CSS frameworks like: (in no particular preference or order)
Setup/Installation
Install the package into your python environment.
pip install wagtail-f-richext
Using it with a RichTextField
{{ page.body|f_richtext }}
will work just like the Wagtail provided filter{{ page.body|f_richtext:"external" }}
will add classes to the HTML tags{{ page.body|f_richtext:"internal" }}
will add inline styles to the HTML tags
Using it with a RichTextField as a StreamField block
{{ value|f_richtext }}
will work just like the Wagtail provided filter{{ value|f_richtext:"external" }}
will add classes to the HTML tags{{ value|f_richtext:"internal" }}
will add inline styles to the HTML tags
Configuration
Without any configuration added to your site settings nothing will be parsed so you need to add one or both of F_RICHTEXT_INTERNAL_CONFIG
or F_RICHTEXT_EXTERNAL_CONFIG
Example for adding inline styles
F_RICHTEXT_INTERNAL_CONFIG = {
# target html tags and add in-line styles
"add_tag_styles": {
"h2": "margin-bottom: 1em; font-size: 4em; font-weight:400",
"p": "margin-bottom: 1em;",
"ul": "float: none; clear: both; list-style: disc; margin-left: 2em; margin-bottom: 1em;",
"code": "font-family: monospace; background-color: #f5f5f5; padding: 0.25rem 0.5rem;",
"b": "font-weight: bold; color: darkred;",
"i": "font-style: italic; color: pink;",
},
# target the provided image alignment classes
"image_alignment_styles": {
"richtext-image left": "float: left; margin-right: 1rem; margin-left: 0; margin-bottom: 1rem; height: auto;",
"richtext-image right": "float: right; margin-left: 1rem; margin-right: 0; margin-bottom: 1rem; height: auto;",
"richtext-image full-width": "margin: 1em 0; width: 100%; height: auto;",
},
# and clear the floats above
"image_alignment_prepend_clear_floats": {
"richtext-image left": "clear: both;",
"richtext-image right": "clear: both;",
"richtext-image full-width": "clear: both;",
},
# clean up the empty tags (they can happen)
"remove_empty_tags": [
"p",
],
}
Example for adding classes to HTML tags
Use this to inject css utility-framework styles into the rendered HTML
F_RICHTEXT_EXTERNAL_CONFIG = {
# target html tags and add css classes
"add_classes": {
"h2": "title",
"a": "color-contrast-higher",
"b": "font-bold",
"i": "font-italic color-contrast-medium",
},
# some utility frameworks provide classes to wrap blocks of text content
"wrapper_classes": [
"text-component",
],
# target the provided image alignment classes
"image_alignment_styles": {
"richtext-image left": "f-richtext-image f-richtext-image--left",
"richtext-image right": "f-richtext-image f-richtext-image--right",
"richtext-image full-width": "margin: 1em 0; width: 100%; height: auto;",
},
# and clear the floats above
"clear_float_styles": {
"ul": "list list--ul float-none clear-both;",
"ol": "list list--ol float-none clear-both;",
},
# clean up the empty tags (they can happen)
"remove_empty_tags": [
"p",
],
}
View conf.py for more examples. You can add just a few or really go to town if you need to.
For the moment the functions responsible for catching the keys of your configuration are hard coded. In the next version I will be providing a way for you to register your own functions for this.
Project details
Download files
Download the file for your platform. If you're not sure which to choose, learn more about installing packages.
Source Distribution
Built Distribution
Hashes for wagtail_f_richtext-0.1.1-py3-none-any.whl
Algorithm | Hash digest | |
---|---|---|
SHA256 | 358d9948ebe0bbb613b3a9fc3eaaf687fd578a92e6d93e0560d5b71946416bfc |
|
MD5 | e6ce42f3a24ff2b281ff3341e37087b3 |
|
BLAKE2b-256 | 02542d89ab4f24edbbb554d8a78d375d398e599bd73d215cf8b1202b908cd53f |