Flexible and easy content creation in Drupal - the Paragraphs module

01.03.2017

Content creation using the Paragraphs module is a completely different approach compared to the "standard" content creation in Drupal.
In short: we prepare the components (paragraph type) and then, during the creation of an entry, we select any of the available components.

The components can be simple elements containing text, contents with columns or such complex elements as sliders, videos or photo galleries. There are practically no constraints; we can define the available components by ourselves, which will then be used by people dealing with content management. We can prepare our own templates for the components (tpl.php files). Properly prepared templates and styles for them will ensure the same display of components, regardless of their place of use and the device (responsiveness).

It is a much more flexible and repeatable solution than creating such things in WYSIWYG editors, where the elements do not always look like we want them to be, not to mention adapting such content to a mobile version of a website. The result is a nicely formatted page of elements that are repeatable and consistent throughout the whole website.

In Droptica we love paragraphs and have built many corporate websites with their use, bringing ease of use to the editorial teams.

Paragraphs is a great convenience for the editor of a website

Nothing can be more upsetting for a website editor than when during adding the content, he fills it with photographs or other elements and after saving, the entire content does not look like it was during the editing process.
Attempts to fix this are usually difficult, time-consuming and inconvenient (you must often add styles in the WYSIWYG view source mode). For people unfamiliar with HTML and CSS it will often become an insurmountable problem.
The properly prepared configuration of the Paragraph module saves time for those involved in content management. They can concentrate on the content, that is – on what they actually should be doing, and not on text formatting (which should be automatically done by CMS).

Content creation with the paragraph module

On the page with the content adding form, we will see a list with types of components (defined by the programmers) available in the system.
In one entry, we can choose an infinite number of components (of the same type or different types) and then freely change their order.

paragraph with addition

Below are shown exemplary types of paragraphs.

Slider Slick with pictures added during content editing

slick slider

And here is how creating a slider looks like – it is a simple thing to do as you just add pictures.

adding new photos

A simple text field

simple text area

It can be freely styled and each time it will look the same.
In addition, to each paragraph, we can hook up its own predefined class with the styles.
For example, changing the background colour or background image is only a matter of choosing the appropriate class.

adding the predefined class

Multi-column fields
Text with a picture

text with photo

Three pictures next to each other

three photos together

The module forms the programmer's side

Using the module and creating new types of paragraphs is very easy for a programmer.
Everything is done on the page and in most cases, the whole process consists of adding the appropriate boxes for a given type.
In the examples in the text, aside from the Paragraphs module, we also use the Classy paragraphs module. Thanks to that, we can attach predefined CSS classes to the selected paragraph.

Creation of a new type of the paragraph

Structure -> Paragraphs types
admin/structure/paragraphs_type

creating the new paragraph

After adding the paragraph, you just have to add the boxes.
Many types of boxes are available and located in the Drupal's core as well as those from the contrib and custom modules.

managing the fields

Once we have created the types, they must be "hooked" to the entity eg. the content, block or any other serving the boxes.
Linking is performed with a special field: Reference revision - Paragraph
In this case, it adds the paragraphs to the Page type of content

adding a field

In field settings we select which types of paragraphs we want to have available in a given type of entity. If we do not select anything, then all types are available.

all types available

We just have to save it. During the adding of content, any paragraph can be introduced.

new paragraph enabled

Adding your own CSS classes to the paragraph.
The Classy paragraphs module is a useful tool if you want to give editors a possibility to eg. change the background colour of a given paragraph.
Of course, we do not have to limit ourselves to just changing colours. All that CSS offers can be implemented here.
Add a linking field to the paragraph.

adding a field

After saving, choose the Classy paragraph styles as a reference.

classy field

At this stage, it is all.
Now you have to define classes so they can be hooked to the paragraph.
You can define them with Structure ->Classy paragraphs style

classy paragraph style

Here are the defined three simple classes for changing the background colour.
The settings are important when it comes to choosing the name of the class.
Remember that the label should be understood by the editor, it is precisely this text that will be displayed during the selection.

editing classy paragrapgh styles

All the magic happens already in CSS.

"css "magic""

From this point, the editor can choose the class when creating a paragraph.
As you can see in the example, there can be several such fields with classes.

fields with some classes