Get started


1 Nov 2023

Curate content better and make it greener in Wagtail 5.2

Now you have even more options to improve search, greenify your images, and curate your content

Meagen Voss

Meagen Voss

Wagtail community manager

You're looking at a wagtail shooting through purple space on top of a rocket ship

Content is only truly useful if you can find it. Anyone who has ever had the experience of hunting through their car for a user manual after their car battery dies knows the frustration of having to find something they don't use all that often. And if you happen to be the type of person who has acquired a lot of old receipts, kid's toys, and random Celine Dion CDs in the glove box of your car from when CDs were all the rage, then you'll have a lot more things to dig through to get to that manual.

As websites mature, they tend to acquire a lot of extra stuff, and it can get harder for both content creators and website visitors to find what they need. So in this release, we dedicated some time to improving the Wagtail search experience and providing more options to help people find content faster. We also spent some time giving people more tools to make their content greener

Improve your page listings

The search experience in previous versions of Wagtail wasn't always the most intuitive or convenient thing for content managers. There were two small search bars that weren't the easiest to spot. Plus, the search would open up a new page, which resulted in more clicks and navigation for people.

The new page listing view provides a larger search bar right in the middle of screen. Search results are displayed right away on the page to help people sort and search through their content more quickly. If you have lots of legacy content, this feature will definitely help keep your scrolling finger from getting too much of a workout.

This is a screenshot of the redesigned page listing used in Wagtail 5.2.

Give users quick access to actions

Another part of our work on page listings and improving the main dashboard was to condense the amount of space needed for each content item by switching from buttons to a dropdown menu. The dropdown offers quick access to the actions editors need and streamlines the number of items listed on each page to reduce scrolling. The dropdown also makes it easier for users of assistive technologies like speech recognition to access and use the menu. You'll definitely want give the content people on your team a head's up about this change unless you enjoy answering the question, "Where did my buttons go?" multiple times in a row.

This is a screenshot showing the new dropdown menu in the page listings view of Wagtail 5.2

Get more options to enhance searching

One of the key changes to search options in this release is that you can now include external URLs in promoted search results. This new search option will be especially useful if you're managing content across multiple websites or publications that share cross-listings.

Another useful search update in Wagtail 5.2 is the new formal support for OpenSearch, which can be used an alternative to ElasticSearch. Using these search services (which both have free and paid options) is optional but definitely can provide some improved search performance for your users if you are managing large amounts of content.

Make images leaner with new template tags

Wagtail 5.2 has two new template tags you can use when setting up how your images are displayed on each page. the new picture tag creates an HTML <picture> tag and generates images in multiple formats or sizes in a single batch rather than multiple actions. The new srcset_image tag generates images in multiple sizes through an <img> tag with a srcset attribute.

Another way to think about this is to imagine yourself printing out photos from your latest family vacation. The size you print for the one that goes on the fridge is definitely not going to be the same size as the one Grandma will be carrying around in her wallet to show off the grandkids to friends and random store clerks. Printing a bunch of photos in sizes you don't need would be pretty wasteful and lead to more clutter. So what this code does is help pick out the right photo size quicker without the server having to load or "print" multiple photos in multiple sizes. That way, each person who views your website gets the size they need for their device with less server activity.

Customize your admin with Stimulus

JavaScript enthusiasts rejoice because now you can customize more client-side actions in the Wagtail admin using Stimulus. Now you can add custom JS code, extend DOM events, extend custom DOM events, and you can also extend your JS with Stimulus and React. If you have no idea what those last two sentences mean and DOM sounds like a video game villain to you, just send this blog to your favorite frontend developer and watch them react to it. We're pretty sure they'll be grinning when they get to this part.

Do more with your models using ModelViewSet

Now for something the backend folks will love. We've been focusing over the last few releases on making Snippets an even more powerful and flexible option for managing repeatable bits of content. Some of that work led to improvements in SnippetViewSet, which is a class that organizes how data from your snippets can be viewed in the Wagtail admin. Some of those new mechanisms and views have been incorporate into more generic classes like ModelViewSet so that now you can use more of the useful features created for Snippets for all of the models in your projects.

A new workflow system and other things to watch out for in your upgrade

There are multiple upgrade considerations to be aware of in this release. One of the biggest is that that the old moderation system for workflows is no longer being supported. So if you have projects that have a lot of workflow customizations in them, you'll want to budget some extra time to convert those during your upgrade. There have also been multiple updates to class names, arguments, template tags, and other bits that will affect your customized Wagtail code.

For the full details on this release, please check out the latest release notes.