I'll also provide insights into how this site was made, as well as code examples and thoughts on how those could be further developed.
Feel free to leave questions or comments at the bottom of each post - I just ask people to create an account to filter out the spammers. You won't receive any unsolicited communication or find your email sold to a marketing list.
Creating Custom Django Form Widgets with Responsive Front-End Behaviour
Creating Wagtail Streamfield StructBlocks with a Customised Editor Interface
Importing Text From File Into a textarea HTML Form Field
We'll tie this together by creating a custom FieldPanel in Wagtail's CMS and add some CSS to tidy things up.
Wagtail - Creating Custom Choosers with Viewsets
This article demonstrates how to create a custom chooser modal for the User model and add responsive filtering to search for records based on a defined set of columns.
Add Unaccent Support in PostgreSQL Search
I show a quick way to load the full extended character set into a custom backend and take you through how to verify that the search is indexing and returning results as desired from the command prompt. Finally, I'll use the custom backend for my Wagtail site search to return pages with unaccented queries.
Wagtail: Extending the Draftail Editor Part 4 - Custom Lists
I'll show how to create custom list styles within those limitations, and also how you can use a custom list to apply styling around a group of consecutive blocks of the same type.
Configuring a Dynamic Sitemap on Wagtail
With a quick bit of coding, you can set your sitemap to be created dynamically on demand, ensuring it always reflects the latest content.
We'll go through adjusting the lastmod field, and add values for the changefreq and priority on site, class or page level.
I'll show you how to add support for xhtml alternate entries for multi-lingual sites using a custom view in place of the built-in Wagtail sitemap app.
Finally, I add a method to notify Google of updates automatically on page publish/delete.
Making Wagtail pages more SEO friendly with Wagtail Metadata
Here, I subclass the Page model with some help from the wagtail-metadata plug-in.
This subclassed model becomes the base for all site pages and holds all the data for og metadata, twitter cards, page description etc..
Improve Response Times and SSL Security on Your NGINX Web Server
With a little basic configuration you can vastly improve the performance of your server and reduce delivery times. Here, I give an introduction to enabling HTTP/2, gzip compression and cache headers.
We'll also add a few changes to tighten SSL security with a stronger ciphers list, Strict Transport Security (HSTS) and add a CAA record to our DNS.
Create Thumbnails with Preserved Edges Using Python Image Library
If you ever had the annoyance of uploading an image to a website, only to have it cropped to fit a certain aspect ratio, then this article is for you. I walk through creating thumbnails where the entire image is displayed without cropping or stretching while meeting the thumbnail dimension requirements
I'll also go through how to add this as an image filter in Wagtail so you can create thumbnail renders for your metadata.
Creating Responsive Font Sizes Based on the Viewport
I'll show you how to linearly scale text between a set of minimum and maximum sizes when the width of the viewport changes, with the goal of making its behaviour at different screen sizes more predictable without the use of media queries and with only one line of CSS. Use the on-screen calculator to build your font sizes.
Wagtail: Extending the Draftail Editor Part 3 - Dynamic Text
I'll go through an example of adding inline Font Awesome icons as a proof of concept which could be easily adapted to show any dynamic information such as stock indices, exchange rates, availability of a resource etc..