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

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

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.

Comments

Hi, interesting article.

I haven't quite got my head around all the angles, but is it not possible to achieve everything need with just paragraphs?

For repeating content a paragraph type could be created with an entity reference allowing an 'embeddable node' type for example the embeddable nodes could even allow a select group of paragraph types within them.

I may be biased as the approach I am honing at the moment has to work with D8 and D7 and limiting the number of contrib. modules is main goal. However I am also interested in a methodology that can be absorbed by newcomers (but already skilled in front-end and/or PHP) without having to learn all the panels etc. config. and concepts and clickitey, clickety admin configuration).

Annertech's default 'Annertechie' profile image.

This looks like a powerful setup and I like the flexibility you have created within a structured world. I'm interested to know how hard it is to 'break' and create terrible looking pages (though my sense is that it would be quite hard). We recently ditched Panels because we were finding it just wasn't sufficiently compatible with multilingual, and various things we needed to incorporate were either broken or unreliable in the context of Panels/Panopoly. It also didn't really mesh well with Scald, which was the media management interface that we were asked to use, resulting in too many vastly different workflows to do quite similar things (fieldable panel panes vs Scald's drag'n'drop).

Looking at Paragraphs as a possible replacement for panels, I personally liked its potential very much, but the multiple fields editing interface was ultimately deemed to be such a big backwards step in terms of WYSIWYG, compared to the CKEditor, that we didn't think we could foist this upon our (admittedly typically very, very inexperienced) users. Even the (Quick)Edit module couldn't save it.

In the end, for our simple, low-end use cases, it looks like we're going to use (and develop) a handful of CKEditor widgets (unbreakable snippets of HTML) for some basic layout templating. It has potential but remains to be seen how well this works in practice in our context (absolute beginner users). I always lean towards trying to educate users to grasp the abstract concepts and structures behind what they are creating, which I think would be needed in order to use your Russian Doll, somewhat more than my colleagues do. Not much understanding needed to use CKEditor and its widgets. Just as long as we can stop them trying to paste pre-formatted content from Word...

PS I think you meant... http://forum.wordreference.com/threads/bear-with-me-past-tense.346249/

Annertech's default 'Annertechie' profile image.

Nice :) How does this work for multilingual websites? How does this work with moderation and revisioning?
Regards,
Loop

Annertech's default 'Annertechie' profile image.

Hi Chris,

I had originally planned on creating a content type called 'Landing Page Item' and then using paragraphs or the default 'Add existing node' in Panels, but we decided to make the whole shebang editable via the panelizer interface, so Fieldable Panel Panes was the needed solution. There's actually surprisingly little config/clickety click. Once the paragraphs are set up as a bunch of paragraphs nested inside a paragraph container, it's the same interface being used everywhere - on nodes, on fielded panel panes, any where else. This actually leads to familiarity with the concept for editors quite quickly - once the learn it once they know it.

Hi 'Insert name here',

The layout of the page is very hard to break. All the client can do is choose background colours and heading sizes for 'Section Heading' paragraphs and 'Landing Page Items'. When placing content in Panelizer pages, they can place them in panels that are 3 sets of 33% width each and/or one set of 66% width (left) beside a 33% width (right) panel (and the reverse, I made some 33% (left) - 66% (right) as well). I like your idea of CK Editor plugins, must think more on that myself.

 

Hi

Mark Conroy - Lead Frontend Developer & Content Strategist

You could also use the Paragraph Panes module to use the existing Paragraph entity types in the Panelizer displays (and Panels displays, etc). It has some small oddities because of how it works, e.g. it doesn't actually create new entities, but it may work well for certain use cases.

Annertech's default 'Annertechie' profile image.

@loopduplicate

There is a known issue when you are mixing Panelizer and node revisions, which Workbench Moderation realy on. I think it's this issue (https://www.drupal.org/node/1402860).

So if you keep either of them out of the mix, or go cutting edge, and use the lates dev version of Panelizer, it seemed to work just fine.

Tommy Lynge Jorgenson - Senior Backend Developer

Hi Damien,

Thanks for that. I hadn't actually come across that module. I'll stick on my 'to learn more about...' list. Thanks again.

Mark Conroy - Lead Frontend Developer & Content Strategist

Add new comment

Restricted HTML

  • Allowed HTML tags: <a> <em> <strong> <cite> <blockquote> <code> <ul> <ol> <li> <dl> <dt> <dd> <h4> <h5> <h6>
  • Lines and paragraphs break automatically.
  • Web page addresses and email addresses turn into links automatically.