Backdrop CMS reliably handles complex website build

Here on England’s south coast, a group of volunteers has been tending Heene Cemetery, a closed Victorian Cemetery (1873–1977). They have been writing up the history of those buried there, and physically maintaining what had previously been old meadowland in order to promote biodiversity in what is now also a Sussex Local Wildlife Site. A citizen science species surveying and recording project there is ongoing. A WordPress website had been storing the accumulated data and presenting it to the world.

Paid for with Heritage Lottery money in 2020, the old site had arguably been failing from the day it was launched. Content editors were regularly saving content only to find that various design elements ‘broke’ (requiring the web shop that built it to be repeatedly called in to fix it). It also spat out bloated mark-up, that failed W3C validation with errors counted in the teens. Whether these defects were due to WordPress or the hands that steered it remained unknown, but the group increasingly needed a different solution.

Having a vested interest in the project as the Cemetery’s environmental advocate, I therefore volunteered to deploy some of my retirement time to work on a site rebuild with Backdrop CMS to correct all these defects and introduced some smarts that the group badly needed. Although my preoccupation with the website rebuild explains why this is the first post I’ve written on this site since November 2023 (yes, 2024 was a very busy year), the result (www.heenecemetery.org.uk) is a resounding credit to Backdrop as a top-rank CMS. This post explains why.

First, the site’s size, here are the stats for its major content types (at the time of writing):

In addition, there are the following discrete content types:

• burial support (templated content blocks for display in specific contexts)
• burials related in some way but in different cemeteries
• calendar events
• gallery photographs
• historic images
• posters (miniatures of the A3 colour posters used on a noticeboard)
• species categories
• testimonials

The new site had to be lavishly illustrated. Most burials have a headstone; researchers had also been able to find period photographs of the buried. The overwhelming majority of the species had been photographed in situ. There is much that is genuinely photogenic. When demonstrating biodiversity in the face of a climate crisis, the more one can grab people’s attention the better.

Another key requirement was to provide a content sidebar in which links to related information could be listed, having this content change throughout the site depending on the context. When a website contains so much information, often the greatest challenge is to surface much of this content, make it findable, and navigable. The less clicks in which users can accomplish this, the better.

These contextual links on mobile device, of course, show up below any page’s main content. But for those who use desktop or tablet devices with sufficient display widths, having these content sidebars visible alongside the main page content offers a significantly richer experience.

The complex structure, hinted at above, required a system that supported these details while at the same time enabling endless flexibility. As a fork of Drupal, Backdrop offers both of these attributes in abundance. I never tire of saying this, and it bears repeating as often as possible: if you can master the Drupal/Backdrop Views module, you’ll take your skills to a different level. Once your content is structured through the content type system, Views enables you to generate glorious visual reports of it, which the Backdrop Blocks and Layouts systems can place wherever you require.

As an indication of complexity, one of the custom content types (the burial records) had nearly 90 different fields; the next most complex (the species records) had nearly 30.

Among these fields are taxonomic term references and booleans that indicate status, belonging or distinction in one way or another. These allowed different content to be flagged for re-use elsewhere. By applying Views filters to identify these nodes, it’s a snip to produce new listings that make sense of this complexity. A sub-set of flowers, for example, are specific to meadowlands and could be listed in a related sidebar; specific graves are Commonwealth War Grave Commission ones; certain species had been given a threatened or vulnerable status and could be listed separately for more detailed treatment; specific burials were considered to be ‘hallmarks’; and much more. Views’ ability to group, categorise and distinguish nodes enables site builders using Backdrop deliver data-rich websites that can extract meaning from the morass of data. This cleaning of the signal-to-noise ratio helped to craft a narrative that is genuinely worth sharing.

One final trick that Views offers is its ability to limit access permissions. This enabled a sophisticated auditing system to be put in place that allowed audits to be presented to users, dependent on role, when they logged in. Nearly 20 different audits were created to list, for example, how many ‘species’ had not been identified to species level (only about 6%); which graves have not yet been photographed; which species had not yet been photographed (excluding lichens, only some 3.5%); which burials had been assigned to the home page’s portrait grid; and much more.

Beyond this core capability that native Backdrop offers, there are some honourable mentions to some of the third-party modules whose help was enlisted to get this complex website built.

Automatic Nodetitles

This module satisfied a rather abstruse requirement to structure the title for burial record nodes, building them from fields within the node. Using a First name + Surname + (“buried” + Year buried + “)” format resulted in a node title of “Arthur Barnes (buried 1937)”. Backdrop has its own token system that permits the building of URLs in a similar manner, but having this exposed for the creation of node titles was immensely helpful for automating the node titling of nearly 2,000 burial records. Configure this before running a Feeds import (see below).

Better Exposed Filters

This module does a bit more than it says. It enhances the native ability of Views to expose its filters for the user to interact with. This makes more sense in context. Take, for example, an exposed filter form:

The module can provide checkboxes or radio buttons, if these are preferable to dropdowns. It can also modify the default “Any” dropdown option and, where relevant, can provide auto-submit behaviour to user selections on a field-by-field basis, plus much more.

Views exposed filters provide rich and detailed functionality, and the Better Exposed Filter module does it, er, even better.

Conditional Fields

One of the little details that Backdrop gets right with custom content types is that when a field has no value, its label isn’t shown to the user. That’s how it should be. This module provides a similar degree of courtesy to content editors. For example, if you want the user to be able to specify that the photograph of the person whose data they are working with should be displayed in, say, a grid of photographs in a different context, it’s best not to ask that question if there is no such photograph. This module allows just that.

A sophisticated but easy-to-understand interface allows the site builder to specify such field dependencies, and many more. Content editors, specialists in their own field, do not have to grapple with otherwise confusing options. Yes, getting things right (for users and editors) takes that extra step or two.

Feeds

To be honest, I’d never appreciated why one might want to use the Feeds module. However, with this project, where there were nearly 2,000 burial records, it was the difference between pass and fail. In simple terms, Feeds can be the fire hose that squirts spreadsheet data into Backdrop content nodes. It can create new nodes, one per spreadsheet row, or it can update existing nodes. It is a gem of a module, offering a ton of flexibility. Feeds will handle short fields, numbers, dates, and cells of thousands of words, all dropped into the destination field you specified. A tidy mapping interface allows builders to specify which source column has which destination field. A separate, powerful Feeds Tamper module enables you to tweak content as it’s being imported.

There is much useful information out there about using this powerful module. My own takeaways are:

• Spend time sanitising any source spreadsheets. The data that came to us out of the previous WordPress website was replete with unwanted inline CSS declarations and with ASCII codes that wouldn’t display when imported. These all needed to be purged before letting Feeds near them. (Find/replace was sometimes quicker than using the Feeds Tamper module.)
• Saving spreadsheets to CSV files wasn’t enough.A separate step (using a capable text-editor) of saving these files with UTF-8 encoding is required.
• Get to know the Backup and Migrate module and/or your PhpMyAdmin system so that you can perform a rollback if necessary.
• Make full use of the Feeds module’s ability to specify a destination long text field’s text format; this setting is available in the module’s mappings section.
• Watch out for paragraphs in long text that are exported from WordPress without paragraph tags. Neither Feeds nor Backdrop can put those back in.

Field Group

This small module adds various field grouping options that Backdrop doesn’t natively have. Horizontal tabs and fieldsets were especially helpful in structuring the display of complex content types.

Gallery Tiler

Ideal for nodes where there may be multiple images to be displayed in a gallery, this small module provides a variety of visual styles. You can see an example here. On mobile, this interoperates with the Photoswipe module, see below.

Leaflet

This module is the way to go if you wish to display multiple location points on a single map, with each map marker linking back to a specified node. Used with Views this draws everything together using the Open Source Leaflet JS mapping library. Some of the group’s researchers wanted to map residences of some of the Cemetery’s buried on a local map. On individual burial record nodes, this module enabled the display of a grave marker within the Cemetery as a whole, helping visitors visit a relative’s grave.

Pathologic

Pathologic is a Godsend. As an input filter applied to different field text formats, it can correct URLs that might be susceptible to change, such as when you move a site from a development server to a live server. The module offers valuable directions and a short reading list. Read up on it if you want it to save you a ton of work.

Photoswipe

This module works perfectly with the Gallery Tiler module above, allowing swiping on mobile instead of clicking to initiate Previous and Next moves within an image gallery. Simple and very effective. One day, Backdrop will do this natively.

Simple Timeline

Timelines are often a better way of displaying historical data than by text alone. Drupal has a sophisticated Timeline Module that integrates with Views and functions horizontally and vertically. This Simple Timeline module for Backdrop can also integrate with Views, but lacks its big brother’s sophistication and is vertical only. You can see the example we built here.

Term Body Class

This is a super-lightweight module that can add a taxonomy term into a page’s body class element. This can be useful if you wish to style content based upon its associated taxonomic value.

Views Data Export

Several members of our group like to keep a record of some of the website’s changing content. This module enables one to export selected content to spreadsheets. It’s configurable through the Views module. For example, it’s useful to generate spreadsheet reports of the species that have been recorded in the Cemetery as this is a format often used by ecologists. Once a view has been built, a spreadsheet can be generated with a single click in an admin-accessible area of the site.

Webform Validation

This project uses a range of anti-spam systems on its webforms. A powerful and flexible one is provided by this module whereby different form fields can be parsed for a variety of customised rules.

Webform Views Select

This module is a classic example of one where its value isn’t evident until you need it. The group has a species sponsorship and dedication scheme to help raise money to support the group’s activities. Having a form that directed people to PayPal to make a modest contribution after they had selected a species was the way to do this. Webform Views Select enables site builders to provide dropdowns on a webform whose contents had been specified in a view. Simple and elegant. (This form also uses the Conditional Fields module mentioned above.)