OPC IT. Managed services and web development in Canberra.

Empower your content authors with Paragraphs

Date: 
28 October 2016
Authored by: 
Toby Wild

This blog was originally going to be a case study on the redevelopment of a website I have been working on.  However after implementing Paragraphs in such an aggressive way, I think it deserves a blog of its own.

The Problem

The WYSIWYG editor was randomly deleting content when you went to edit.  Panels had been setup all over the site, but there was no moderation for content authors to stage and approve content.  Many elements had been hard coded into the theme and the naming structure was incoherent.

A day into the project, and I had a big choice to make.  I took the plunge, deleting the theme, uninstalling all Panel and Media related modules and anything else that was hanging on, until I was left with the only salvageable content, a handful of basic pages and ‘products’ in a structured Information Architecture.  I would have deleted them as well and started from scratch, but there was a fair few path redirects and alias’s I didn’t want to break.

From there the challenge was to have the content authors adding in content in a similar look as the Panels, where content was broken up into discrete sections, but in a way that allowed for full Workbench access and revisioning, and most importantly, was EASY for the content authors to use.

The solution: Paragraphs.

Paragraphs is very similar to Field Collection, except it allows you to create a library of paragraphs, and let the content author include them in the pages in any configuration or order they wish.

Additionally, each paragraph can by pre-styled using the standard Drupal 7 templating engine, allowing for some creative and powerful Paragraphs.

For example, when a content editor creates a new page, rather than a single text field, where they would need to edit in source mode to provide Div wrappers in order to provide unique styling, they are shown these Paragraph buttons:

Modular controls

From here they can select any one of the pre-developed styles and insert them in any order.

The Implementation

In my example, there are three basic techniques that Paragraphs uses.

  1. Standard Content
  2. Paragraph Content
  3. Code triggers

Standard Content

Standard Content is the basic field kind of Paragraph, were you add normal fields.  For example, clicking the ‘Content Box’ field will give you a textfield, select list, and a text area.

The difference is that by creating custom theme templates, I can use the select list, and use that as a Class for the container Div.  Meaning that the author can add in as many of these content boxes as they like, but each section might look different, from having a different border colour, to a different font size.

Paragraph Content

Paragraph Content is a recursive effect where we use Paragraphs to add other Paragraphs.  Just like normal content authors might do with an Unlimited text field, adding in new items over and over again, it’s expanded to be a full Paragraph, meaning we can have unlimited sets of fields.  Rather than just a repeating a single text field, we can repeat multiple text inputs, with images and more.

In the example above, it is done with the FAQ Section.  Adding an FAQ Section simply adds the container, and you are then prompted to ass as many FAQ’s as you would like.  Each FAQ is made of a question and an answer, and we can add as many as we like, repeating down the page.

FAQ Style

Code Triggers

Code Triggers is the final action that you can do with Paragraphs.  The Paragraphs themselves are very thin, and only contain a few simple fields, but you then use those fields to trigger something more.

For example, I have a Paragraph that has a select list, and a taxonomy term tag field.

Paragraph style

If the user selects ‘Latest three news’, the template will run a views_embed_views() function and render out that View.

If the user then adds a taxonomy term from the ‘News Filter’ it adds the third argument to the function and the view is filtered by that term.


Using the above methods, we are able to provide simple and straight forward editing tools to our content editors, and have them manage their own robust and dynamic content on the website.