Category Technology
Publication date
01 March 2016

Drupal + Panels + Panelizer + Paragraphs + (Fieldable) Panel Panes - if it begins with P, use it

This was the user story: "As a site admin, I want to be able to add different types of content chunks on any page with customisable backgrounds, so that we have control over the style and layout of our website". Yes, it's a pretty big user story, but bear with me.

When working with a large government client recently we made special efforts to ensure that all the content on the website was developed in a structured manner and to develop mechanisms for what Karen McGrane calls 'chunks' of data instead of a 'blob' in the body field. We had been trialling the Paragraphs module on a number of sites (being cautious because of some issues that it's older relation Field Collection had with multilingual and revisions when used with Workbench Moderation). We gave Paragraphs the full treatment on this site, creating paragraph bundles for section headings, text blocks, image (with optional caption and float left/right capabilities), slideshow, call to action, and more.

Drupal, adding structured content

We then created a paragraph bundle called 'Structured Content Block' which had two fields: a background colour field and a multivalue embedded paragraphs field of all the above named paragraphs, a concept we called 'The Russian Doll'. This meant that the client could create any type of content within their pages and reorder it at will.

Drupal, adding structured content items

Another requirement was the ability to create landing pages on the fly, with some default content on every landing page, but all other aspects of the page customisable, while retaining a content model of one single source of truth. To achieve this, we used Panels and Panelizer. This meant we could create a content type called "Landing Page" and set some default views that would be placed on all landing pages. These were further restricted by only showing nodes in the views that were also tagged with the same taxonomy terms that were found on the landing page. So, a landing page of Type: A, and Topic B, and Sub-topic C would only show news items that had the same taxonomy terms selected. Next we created a panels plugin with lots of regions to allow the client maximum flexibility when it came to how the pages would be laid out. This screenshot shows about half of those regions.

Drupal, custom panelizer page

A further requirement was that all panes needed to be customisable in terms of background colours and the content that could go into them. So, they needed to be able to accept the standard things that panels can - existing nodes, views content panes, blocks and other widgets. However, the client also wanted to be able to add ad hoc (though reusable) chunks on these landing pages. To achieve this we used Fieldable Panel Panes, and 'The Russian Doll' approach from above. Fielded panels panes had two fields - background style and embedded paragraphs. This allowed the client to create panes with a background colour and then create paragraphs inside these of different content chunk types. The panel panes are re-usable, so if you create one for one landing page, you can then use it again in another one. Here's the set up for a fielded panel pane (which we called "Landing Page Item"):

Drupal, adding fieldable panel pane

This was the user story: "As a site admin, I want to be able to add different types of content chunks on any page with customisable backgrounds, so that we have control over the style and layout of our website". Yes, it was a pretty big user story, but we beared with it.

Now, your turn - what's your approach to structured content in Drupal? What's your experience of Paragraphs module? More specifically, have you any thougths on the mixture of paragraphs with panelizer and revisions/workbench moderation (especially on multilingual websites)? Let us know in the comments.