Working With The Paragraphs Module For Drupal

Recently, I started using the Paragraphs Module to develop landing pages for Drupal Websites.

If you haven’t used it before, go check it out. It’s really user-friendly. I feel like it’s a replacement for field collections. However, unlike field collections, paragraphs allow you to choose a different set of fields each time.

Contributed modules mentioned in this post:

• https://www.drupal.org/project/paragraphs

• https://www.drupal.org/project/entity_background

• https://www.drupal.org/project/blockreference

• https://www.drupal.org/project/classy_paragraphs

Custom module:

Paragraphs class, download here.

 

Why Use Paragraphs?

Paragraphs give end users more control. For instance, by using the Paragraphs and entity background modules together, it is possible for the end user to choose background images and colours.

 

Get It Running

Define the paragraph bundles you intend to use using their User Interface (UI). Since Paragraphs is an entity, you can add any field and manage their display mode, just like adding a new content type.

Create a new field of paragraph type on any node, and choose what paragraph bundle this field can reference to.

 

Set Up Landing Page Content Type with Paragraphs

Here is an example of how I setup a landing page content type:

1) First, define 3 paragraph bundles: simple, advanced, and blocks paragraphs.

   1a) the simple paragraph has a title and body field.

   1b) the advance paragraph has a title, body, and field collection fields.

   1c) the block paragraph has a title, body and a block reference field (using block reference module, so end user can use embed slider, maps, views block, etc).

2) Download and configure the entity background module to allow background color and image for the above 3 paragraph bundles. There is a background image style, don’t forget to change that.

3) Since our design uses full a width background, I created a template file for a landing page content type and used a page preprocess function to load it.

4) Then I created a landing page content type, removed the body field and added a paragraph field with unlimited cardinality. (Make the above 3 paragraph bundles available to this field.)

5) Don’t forget to configure permissions to allow anonymous users to view the paragraph content.

 

The CSS Targeting Issue

Theming paragraphs can be a little tricky. The default paragraph class has a synchronization issue. Just like node id, you can’t guarantee that it will be the same on a different server. Therefore, we can’t use it for targeting each paragraph section individually. We also can’t use CSS nth-child selector on paragraph, because as soon as the end user changes the paragraph order on the backend, wrong CSS will be applied.

I tried the classy paragraphs module for assigning a class to each paragraph. You have to create a field and implement a hook to output a predefined class option list for each paragraph bundle. Since every paragraph bundle will be tied to the same set of predefined classes, it does not make sense in our use case.

What I really want is a way to target each individual paragraph section and make sure both local and other environments have the same class.

By studying the entity background, and class paragraphs modules, I came up with this paragraph class module. You can download the module here. This module creates a CSS class text field that allows end users to assign CSS class to each paragraph section.

To get it working do the following:

• enable this module

• go to each paragraph bundle editing page and enable it. (It will create a paragraph class field for the enabled bundle.)

• whatever you enter in that text field will be converted to a single CSS class and output it on the entity container.

By manually entering the CSS class for each paragraph instance, we overcome the targeting issue for different environments.

Let me know if you have any questions or suggestions. Thanks for reading.