Building site content, paragraph by paragraph

We've done a fair bit of reading around lately, thinking through different ideals on content construction. There's a fine balance to be struck between atomic units of content, vs. an enormous amorphous blob of formatted HTML, and articles like this by Wim Leers and sessions like this provide great food for thought.

ComputerMinds recently sponsored the site for Coventry Motofest, and I was lucky enough to be part of the team. We've done a few sites lately with our bespoke block-based system, but we wanted this site to be a bit simpler. Different content types would still be needed, as well as control for content sizing at different breakpoints, but we wanted more simplicity throughout - our block system can get a bit fiddly at times. We decided to take a foray with the Paragraphs module, and what an adventure it's been!

What's a Paragraph?

The Paragraphs module works on the principle of breaking content into different chunks, named paragraphs. Paragraphs don't have to be your conventional text paragraphs as you would normally know them, however - they can be text, images, slideshows, tabs… anything you want! This means that putting pages together is as simple as clicking the button for the new paragraph type you want, and then putting in your text / images / options.

Paragraphs are essentially field collections, which makes them a fairly familiar platform to work with. You create different Paragraph Bundles (types of paragraph), which can be individually templated, and add exactly the fields you need. Once you've added a Paragraphs field to your content type(s), you can then define which Paragraph Bundles can be used on that content type.

Paragraphs in action

We created paragraphs for media (text and images), maps, partner ads, views, social media, events and Webforms, and these power all the content on the site. Take a look at the site - each chunk of content is a paragraph.

*I've highlighted some here - There are two media paragraphs (orange, blue), a paragraph that shows items from a view (red) and a MailChimp signup form paragraph.*

Paragraphs go Mobile

You can't develop a site in 2015 and not think very carefully about how it works on mobile. Following our mobile-first strategy, we needed to be able to choose how wide the paragraphs were to be at different viewport breakpoints. We added a field on each paragraph bundle, which defines sizing instructions for the paragraph to be passed through the theme layer.

Our defaults provided full-width paragraphs at the 'mobile' breakpoint upwards - but more complex defaults are possible. With this field in action, we're able to define widths of 1/4, 1/3, 1/2, 2/3, 3/4 and full-width, enabling some really nice layouts.

It's even possible to target content at a particular breakpoint - over the MotoFest weekend, we were able to add content to the home page which targeted only mobile users. By adding a map to the home page, we made the site just a little bit quicker and easier for mobile viewers - just what you need during a city-wide event with 100,000 people in attendance!

Making the editorial role easier

One of our goals was to keep the editorial role as simple as possible - if somebody just wants to change some text, that should be really really easy. A great way to enable fast edits is to have an 'Edit' contextual link on each paragraph, which means you don't need to return to the rather large node edit form. Instead, you get an edit page just for that paragraph. James Williams made a patch which made this possible, and hopefully this'll make its way into a future module update.

*Because they're rectangular and have grey in between, we've called our paragraphs Bricks*

The ultimate standard in editorial ease would be same-page editing. We had a quick play with QuickEdit, but it only works with basic fields at the moment and it looks like a fair bit of work to make it play nicely with Paragraphs right now.

What we love about Paragraphs

Paragraphs makes content creation really nice. You can add lots of different chunks of content to a page, lay them out how you want to, reorder and reposition them, and easily update the template files to get everything exactly how you want to. Changing the look and feel of a page takes just a few quick changes.

This fits in nicely with this site's model, where different pages have radically different content, and the size of the site doesn't make it worth restricting control of layout and formatting. Our editors can make style and formatting choices, and that works well for this scenario.

We've enjoyed this first adventure with Paragraphs, and have had fun trying out different layouts and formats. Even better, it'll be easy enough to copy this functionality on future sites (we're already porting some of these elements to a number of our clients' sites, and they love it too) and continue developing it.