Cleaner content with Drupal Paragraphs module

A static content layout lifesaver: Paragraphs module

Lisette Mazure
07.08.2017
|
Lisette Mazure

As Drupal website users, we all know how boring static basic pages and detail pages are. As Drupal developers, we all know how frustrating those boring basic pages and detail pages become, when someone (indeed, the content editor) tries to change the layout by messing with the source code of the WYSIWYG.

Frustrate no more. The Paragraphs module is here to save the day (and your content layout)!

What is it, this Paragraphs module?

Imagine you’re a content editor and you want to create an article with some text, a few images, maybe a caption underneath the image. You also would like to have a quote, which stands out with a full width background image. How would you do that with the WYSIWYG? You try to modify the HTML in the source code and hope it turns out exactly like you had in mind. 

Of course, that’s wishful thinking. But there is a solution. One that doesn’t require a big WYSIWYG field, but a solution that lets the content editor create every section of the article separately.

Curious how it works? Let’s dive right into it, shall we.

** For examples I am referring to a paragraph demo site I recently created for Druid. **

The Paragraphs module simply creates a new field type, Paragraph, which you can use in your content type. And for each type, you can add field types. Sounds familiar? Well... it kind of works the same way as a content type.

Paragraph fields
Paragraph fields


Now you’re probably thinking, “haha, what’s so life-saving about this” and you have a point. The field type is nothing life-saving at all, but the paragraph types behind it are.

Paragraph types

A paragraph type consists of fields, and these fields are the same types as those of a content type (you even get an extra reference option to another paragraph).

Paragraph types
Paragraph types


After you’ve created your paragraph types, you can add them to your content type – and this is the nice thing about it. Basically, you create a field with a reference to paragraph types. You can define no paragraph types, which will let you use them all, or you can define only those you would like to use in a specific content type. When you create a new node you can use as many paragraphs as desired, and you can mix them as much as you like. There’s also a handy little drag and drop so you can change the order of the paragraphs really quickly and easily.

Paragraph add content
Paragraph – Add content

 

Paragraph added content
Paragraph – Added content


Each paragraph type has a matching template file, where you can add the needed HTML markup. This allows you to theme per paragraph and that way, you don’t have to worry about the layout of your node. It doesn’t matter if you add a certain paragraph type to the top of the content or the bottom; if the theming has been done properly, it will look good.
 

Paragraph frontend
Paragraph frontend


Looking pretty good, right? Try that with one huge WYSIWYG body field. Yup, didn’t think so!

Why you should only use it for static content 

The purpose of this module is to create nicer and cleaner content. As in content created by the client. Overview pages, feeds, or any other item that needs dynamically generated content, should probably be handled by something that is able to do this automatically, like views.

If you want to give the content editor a bit more freedom layout-wise, but at the same time you don’t want to worry about your pretty layout getting messed up, the Paragraphs module is exactly what you need. Dying to try it out? You can find the module here. I truly hope you enjoy using it as much as I do!

Add new comment

Plain text

  • No HTML tags allowed.
  • Lines and paragraphs break automatically.
  • Each email address will be obfuscated in a human readable fashion or, if JavaScript is enabled, replaced with a spam resistent clickable link. Email addresses will get the default web form unless specified. If replacement text (a persons name) is required a webform is also required. Separate each part with the "|" pipe symbol. Replace spaces in names with "_".
  • Web page addresses and email addresses turn into links automatically.