How to Create Powerful Container Paragraphs in Drupal 8

Want to learn more about Paragraphs? Then check out our online video course called “Build Edge-to-edge Sites using Paragraphs in Drupal 8“.

In the last Paragraphs tutorial, you were introduced to the module and we created a basic paragraph type called Content. We only skimmed the surface of what the module can really do. To utilize Paragraphs to its full potential you need to learn how to create a container paragraph type and nest paragraph items.

The concept of a container is fairly simple. It’s a paragraph type that has its own paragraph field on it and allows a user to nest paragraph items.

Below is an example of how it’ll be rendered.

Fig 1.0

In this tutorial, we’ll create a container paragraph called Banner, it’ll have two fields: image and paragraphs.

When a banner paragraph is created and an image is uploaded, the image will be displayed as a background style. Now, I do understand there’re multiple ways of doing this, but for simplicity we’ll set it using a background style on the paragraph element.

All nested paragraphs will be rendered inside the container and displayed with the background. If you want to add any other settings, i.e., parallax configuration, you would place it on the container paragraph.

Here is what the end product looks like on a Drupal site.

Fig 1.10

Getting Started

To save time, let’s reuse the paragraph type we created in the last tutorial. Don’t worry, you won’t have to reread the last tutorial again. Simply download this sandbox repo and enable it. Once the module has been enabled you should see the Content paragraph type.

Now make sure you have Paragraphs and Entity Reference Revisions installed.

Below are the Drush and Drupal Console commands to download and install:

Drush:

$ drush dl paragraphs entity_reference_revisions
$ drush en paragraphs

Drupal Console:

$ drupal module:download paragraphs 8.x-1.0-rc4
$ drupal module:download entity_reference_revisions 8.x-1.0-rc4
$ drupal module:install paragraphs

Create Container Paragraph Type

The first bit of work that needs to be done is create the container paragraph type.

1. Go to Structure, “Paragraphs types” and click on “Add a Paragraphs type”.

Fig 1.1

2. Enter in Banner into Label and click on Save.

Fig 1.2

Add Fields to Container Paragraph Type

We created the Banner paragraph type, let’s now add two fields: Image and Paragraphs (the nested field).

1. Expand the Edit button and click on “Manage fields” on the Banner row.

Fig 1.3

2. Click on “Add field”, Select Image from “Add a new field” and add Image into Label. Then click on “Save and continue”.

Fig 1.4

3. Leave the “Field settings” page as the default and click on “Save field settings”.

4. On the Edit page, check the “Required field” checkbox, scroll to the bottom and click on “Save settings”.

So far we’ve done nothing ground breaking. All we did was create an image field and made it mandatory. Now let’s create a paragraph field which’ll be used to nest the paragraphs.

5. Click on “Add field” again, select Paragraph from “Add a new field” and enter Paragraphs into Label. Then click on “Save and continue”.

Fig 1.5

6. On the next page, leave it as the default then click on “Save field settings”.

7. On the edit page, scroll down to the list of paragraph types and select only Content. This will make sure the right paragraph is available. Then click on “Save settings”.

Fig 1.6