Customizing Wagtail Streamfield

1
votes

Can anyone provide the code necessary to create the Wagtail Streamfield options that are previewed on the wagtail.io website front page?

https://media.wagtail.io/images/w1_5pmaP1U.original.width-1600.png

Specifically, I'm interested in Aligned Image, Wide Image, Bustout, Raw HTML, and Markdown.

1
djangowagtailwagtail-streamfield

1 Answers

5
votes

This page describes how to freeform page content using StreamField (blocks). https://docs.wagtail.io/en/latest/topics/streamfield.html

You can subclass any built-in block and provide your own template:

class WideImage(ImageChooserBlock):
    class Meta:
        label = 'Wide image'
        icon = 'image'
        template = 'website/blocks/wide_image.html'

The html is up to you:

{% load wagtailimages_tags %}

{% image self width-1024 as img %}
<img src="{{ img.url }}" class="image--wide">

Ofcourse the css is up to you too.

.image--wide { width: 100% }

What the exact markup and styling should be, depends on your current frontend markup and styling.

Aligned Image, Wide Image and Bustout can be achieved in the same way. Simple markup and little css.

Raw HTML is an existing block https://docs.wagtail.io/en/latest/topics/streamfield.html#rawhtmlblock

You can store your markdown in a TextBlock. https://docs.wagtail.io/en/latest/topics/streamfield.html#textblock

Converting markdown to html is a three line custom string filter:

@stringfilter
def md(value):
    return markdown2.markdown(value)

Use it in your template:

{% load app_tags %}
{{ self|md }}