Recently, while working on a Wagtail project, we added a choice field with some icon choices, so that users could choose an icon to be used on a Wagtail page. It was helpful to have a dropdown of icon names, like this:
However, a few of us noted that it would be nice to be able to see the icons before choosing one. Immediately, we searched both the Wagtail documentation and the internet for a suitable solution, but weren't able to find an easy solution. So, we made our own, wagtail-thumbnail-choice-block.
You can find the source codeon GitHub: https://github.com/lincolnloop/wagtail-thumbnail-choice-block, and it's now released on PyPI.
Example
To demonstrate what we built, the same dropdown now looks like this:
Overview
A high level overview of the functionality:
Blocks
The ThumbnailChoiceBlock subclasses wagtail.blocks.ChoiceBlock, handles some arguments that are passed in, and uses our `ThumbnailRadioSelect`.
Widgets
The ThumbnailRadioSelect subclasses django.forms.RadioSelect, and passes some helpful data for each option, such as a URL for the thumbnail.
JavaScript
thumbnail-choice-block.js handles the user interaction of clicking on the input, choosing an option, and searching.
CSS
thumbnail-choice-block.css adds some styling to the component.
Example App
One helpful part of the library is that it comes with an example app that sets up a Wagtail project with examples of how to use the thumbnail choice block. It doesn't require many external dependencies (really, just Python and pip, which will install Wagtail and other dependencies).
A Few More Examples
Here are a few more examples of what you can do with wagtail-thumbnail-choice-block:
Let users choose a theme for a page
Let users choose a layout for a page
Let users choose a profile
Conclusion
We've found this little library to be useful on our projects. Please test it out in your projects, or contribute to make it better.
