Wagtail Overview – Python’s most prominent CMS

Introduction

CMS (Content Management Systems) have gained enormous popularity among web developers and users of the 21^st century. The simplicity of use and speed of implementation have made creating and designing modern websites easier and more user-friendly, mostly thanks to provided built-in interfaces and graphic editors. As a result, we have lived to the times when building and maintaining entire websites is possible without advanced programming skills. It comes as no surprise that Python, one of the fastest growing programming languages of all time, can boast about having its own unique tools that enable developers to efficiently design modern websites, most of which are based on Django – Python’s most popular and advanced web framework. Among multiple commonly used CMS for this technology, there is one that undoubtedly stands out – Wagtail. In this article, I would like to get closer to the topic of how this system may revolutionize the way we think about CMS and encourage you to try it for yourself.

Overview

Fig. 1 Wagtail logo

Wagtail is an open-source Content Management System introduced in 2015 by Torchbox and it is based on the Django framework. Its key features are

·   easy implementation,

·   quick and flexible development,

·  as well as powerful capabilities.  

As of March 2022 the latest version of Wagtail (2.16) supports 3.2 and 4.0 versions of Django as well as 3.7-3.10 versions of Python. Wagtail developers praise their product for little configuration time, compatibility with python packages and simple templating system for building beautiful websites.

Unique features of Wagtail have been noticed by dozens of world-wide corporations and organizations including NASA, Oxfam, Google or Mozilla, all of which are using Wagtail as a core CMS for their websites.

The “good”

One can simply find out just how easy is it to set up the base Wagtail application in just 7 lines:

Fig. 2 Wagtail installation

Similar to setting up a Django project, from this moment the application is fully working and ready to implement its first views. When diving inside the code, most of the developers will discover that the created project structure is almost the same as the one they know from the Django framework. The server is up and running, and our home page can be accessed at http://127.0.0.1:8000 :

Fig. 3 Wagtail welcome page

To implement first view with a few simple lines of code is enough:

in models.py

class BlogIndexPage(Page):
	date = models.DateField()
	intro = models.CharField(max_length=250)
	body = RichTextField(blank=True)
 
	content_panels = Page.content_panels + [
    	     FieldPanel("date"),
    	     FieldPanel("intro"),
    	     FieldPanel("body", classname="full"),
	]

in blog_index_page.html

{% extends "base.html" %}

{% load wagtailcore_tags %}

{% block body_class %}template-homepage{% endblock %}

{% block content %}
	{{ page.intro|richtext }}
	{{ page.body|richtext }}
{% endblock %}

Fields that we want to include on our page (images, rich text etc.) are written directly in the models. It creates flexibility in terms of new features implementation and application scaling. How much we may customize a particular page and interact with is defined in content_panels attribute, as it basically describes all the editing controls within the admin panel for a particular page type.

Wagtail uses regular Django templates to render each page, which is very convenient for every day Django users. But this CMS also takes one step further by adding extended template tags to the application, giving developers advanced tools to customize the page content. Since each page in Wagtail is an instance of a class, built-in tags allow for instance to:

·  use specific class methods,

·  reach for instance attributes,

·   or even iterate over related objects.

This may be especially helpful when one needs to list all links to subpages in a home page – Wagtail provides an out-of-the-box solution with just a few lines of HTML code.

After creating a BlogIndexPage model and corresponding template, we must create an actual page instance. This is the moment that we may dive into a famous admin panel.

Fig. 4 Wagtail admin panel – Pages list

At first glance, the thing that distinguishes the Wagtail admin panel is its clarity. Each model we have written and migrated into the database is visible in the admin view, as well as each instance we have created. We can add new pages of models we previously implemented in the code. As an example, we may now create a new model called BlogPage which would serve as one of the items of the home page index and so on.

Fig. 5 Wagtail admin panel – Editing page

All the editable sections of each page are defined in the content_panels attribute of its model class. It makes each page fully and easily customizable with just a few lines of code.

The best part though comes with more advanced features of the system. Wagtail developers praise their unique StreamField attribute, which basically allows them to create customized and limitless sequences of different blocks on page.

in models.py

class BlogPage(Page):
author = models.CharField(max_length=255)
date = models.DateField("Post date")
body = StreamField(
       [
               ("person", PersonBlock()),
               ("heading", blocks.CharBlock(form_classname="full title")),
               ("paragraph", blocks.RichTextBlock()),
               ("image", ImageChooserBlock()),
               ('gallery', blocks.ListBlock(ImageChooserBlock())),
       ]
)
 
content_panels = Page.content_panels + [
       FieldPanel("author"),
       FieldPanel("date"),
       StreamFieldPanel("body"),
]

From the code perspective, we simply add one new class attribute added to content_panels. The database will recognize the sequence of mixed content types as a single serialized JSON when we add them and represent it properly in the HTML template.

Fig. 6 Wagtail admin panel – StreamField example

From the admin panel perspective, we can now select and add specific blocks within the StreamField section. The editing is very simple, allowing you to customize a given block with any content type that is stated in the page model class.

This makes StreamField by far one of the most useful key features of Wagtail. Its flexibility and simplicity allows it to implement customized and advanced sections on the page with minimum effort. Arranging the blocks is very simple, and the result is elegant, it also organizes section blocks very nicely while minimizing the amount of necessary code in the application.

The “bad”

“With great power comes great responsibility.” And unfortunately, this is exactly the case for Wagtail, as it requires slightly more skill than most of its competitors on the market (for ex. Django CMS or WordPress). While maintaining a created website is simple even without developers’ skills, reaching the point where an application is functional and has all desired features may be problematic if someone has just started their programming journey. There are currently no “one-clicks” to set up a full site and manage it, all that needs to be programmed first, and it takes a little time and even more experience.

Also, compared to WordPress or even Django CMS, Wagtail still lacks a big community base, even though it seems to have gathered more attention on the web lately. It may still be a result of a slightly younger age as Wagtail came out in 2015, 5 years after Django CMS. While there are a few quite good tutorials on the web, there is no comparison to a bigger system with a much larger community base. Likewise, the abundance of plugins available in WordPress will probably encourage more developers focused on fast paced development.

The “pretty”

Finally, let us have a glance at the look of the websites based on Wagtail. It was already mentioned several times that it offers a very well organized and clear admin panel. But not only that, the beauty of Wagtail-created websites should amaze or at least intrigue even the worst skeptics. Thanks to the flexibility of StreamField and large diversity of built-in page fields, panels, template tags as well as extended support for various media types (e.g. automatic face detection in pictures) created pages can take truly remarkable form. Below I have listed a few examples of Wagtail’s magic, more are available on their official website at https://madewithwagtail.org/.

Fig. 7 Wagtail websites examples

It is also worth mentioning that Wagtail integrates perfectly fine with Bootstrap and other frontend toolkits, since it uses basic Django templates enriched with new tags. The same goes for any other graphical and non-graphical Python package, all of which are fully compatible with Wagtail (at least according to their official statement).

There are obviously numerous other highlights of the Wagtail CMS we had no time to cover, here are a few more worth mentioning:

·  simple yet extended site localization,

·  integration with Elasticsearch,

·  intelligent image cropping,

·   customized and easily configured form builder.

Summary

To summarize, Wagtail may be one of the best modern choices for Python CMS and general CMS. Its simplicity of use and maintenance, clear admin interface and limitless power of features with Stream Field on top make it shine among other similar technologies like Django CMS or Mezzaine. Nevertheless, although its strengths are truly great, it may cause problems for beginner developers as well as it still lacks large community support compared to WordPress. We all believe it will be solved in the future, though, when new developers start appreciating Wagtail capabilities. Let us hope some will do thanks to this article.

Sources

[1] https://wagtail.org/

[2] https://docs.wagtail.org/

[3] https://madewithwagtail.org/