Additions for those ahead

If you are ahead on the wagtail workshop, this page contains some functionality you can add to your site.

StreamField

StreamField provides a content editing model suitable for pages that do not follow a fixed structure – such as blog posts or news stories – where the text may be interspersed with subheadings, images, pull quotes and video. It’s also suitable for more specialised content types, such as maps and charts (or, for a programming blog, code snippets). In this model, these different content types are represented as a sequence of ‘blocks’, which can be repeated and arranged in any order.

StreamField also offers a rich API to define your own block types, ranging from simple collections of sub-blocks (such as a ‘person’ block consisting of first name, surname and photograph) to completely custom components with their own editing interface. Within the database, the StreamField content is stored as JSON, ensuring that the full informational content of the field is preserved, rather than just an HTML representation of it.

Read more about streamfields on the Wagtail docs https://docs.wagtail.io/en/v2.9/topics/streamfield.html

To convert the body field of your blog post from a rich text field to a StreamField, update blog/models.py

Copy
1# to your imports, add:
2from wagtail.core.fields import StreamField
3from wagtail.core import blocks
4from wagtail.admin.edit_handlers import StreamFieldPanel
5from wagtail.embeds.blocks import EmbedBlock
6
7# convert your blog's body to a StreamField:
8body = StreamField([
9    ('heading', blocks.CharBlock(classname="full title", icon="title")),
10    ('paragraph', blocks.RichTextBlock(icon="pilcrow")),
11    ('embed', EmbedBlock(icon="media")),
12])
13
14# and, in content_panels, convert body's FieldPanel into a StreamFieldPanel:
15StreamFieldPanel('body')

Update your blog page template to output the new field type, replacing {{ page.body|richtext }} with

Copy
1{% for child in self.body %}
2    {% if child.block_type == 'heading' %}
3        <h2>{{ child }}</h2>
4    {% else %}
5        {{ child }}
6    {% endif %}
7{% endfor %}

To made embed blocks responsive see the Wagtail docs.

Wagtail menus

For implementing a custom menu solution to your site, try wagtailmenus.readthedocs.io.

Add some basic menu styling to your css:

Copy
.menu ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

.menu li {
    float: left;
}

.menu li a {
    display: block;
    color: black;
    padding-left: 0px;
    padding-right: 16px;
    text-decoration: none;
}

Tagging

Have a go at implementing tagging for a page model, perhaps your blog could use this feature...

• Implementing tagging https://docs.wagtail.io/en/v2.8/getting_started/tutorial.html#tagging-posts
• Categories https://docs.wagtail.io/en/v2.8/getting_started/tutorial.html#categories

Awesome Wagtail

For a list of great third party apps you can use, see https://github.com/springload/awesome-wagtail