Drupal containers how to#
Drupal containers code#
Drupal containers download#

As mentioned in the introduction the image will be added as a background style. The final piece to this epic puzzle is the preprocess hook.

The default settings on the paragraph formatter is fine so we won’t touch it.

Drupal containers code#

We’ll write a bit of code to add the image as a background to the paragraph. Make sure you move the Image field to the Disabled section. Set the Label drop-down on the Paragraphs formatter to - Hidden -.ģ. Scroll to the bottom and click on Save.įinally, let’s quickly configure the field formatters.Ģ. If required, you can go ahead and change the widget settings. So far we’ve simply created the fields, let’s now make sure the field widgets are configured.ġ. This will make sure the right paragraph is available. On the edit page, scroll down to the list of paragraph types and select only Content. On the next page, leave it as the default then click on “Save field settings”.ħ. Click on “Add field” again, select Paragraph from “Add a new field” and enter Paragraphs into Label. Now let’s create a paragraph field which’ll be used to nest the paragraphs.ĥ. All we did was create an image field and made it mandatory. So far we’ve done nothing ground breaking. On the Edit page, check the “Required field” checkbox, scroll to the bottom and click on “Save settings”. Leave the “Field settings” page as the default and click on “Save field settings”.Ĥ. Click on “Add field”, Select Image from “Add a new field” and add Image into Label. Expand the Edit button and click on “Manage fields” on the Banner row.Ģ. We created the Banner paragraph type, let’s now add two fields: Image and Paragraphs (the nested field).ġ. Enter in Banner into Label and click on Save. Go to Structure, “Paragraphs types” and click on “Add a Paragraphs type”.Ģ. The first bit of work that needs to be done is create the container paragraph type.ġ. $ drupal module:download entity_reference_revisions 8.x-1.0-rc4

Drupal containers download#

Now make sure you have Paragraphs and Entity Reference Revisions installed.īelow are the Drush and Drupal Console commands to download and install:ĭrush: $ drush dl paragraphs entity_reference_revisionsĭrupal Console: $ drupal module:download paragraphs 8.x-1.0-rc4 Once the module has been enabled you should see the Content paragraph type.

Simply download this sandbox repo and enable it. Don’t worry, you won’t have to reread the last tutorial again. To save time, let’s reuse the paragraph type we created in the last tutorial. Here is what the end product looks like on a Drupal site. If you want to add any other settings, i.e., parallax configuration, you would place it on the container paragraph. 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.Īll nested paragraphs will be rendered inside the container and displayed with the background.

When a banner paragraph is created and an image is uploaded, the image will be displayed as a background style. In this tutorial, we’ll create a container paragraph called Banner, it’ll have two fields: image and paragraphs. It’s a paragraph type that has its own paragraph field on it and allows a user to nest paragraph items.īelow is an example of how it’ll be rendered. The concept of a container is fairly simple.

Drupal containers how to#

To utilize Paragraphs to its full potential you need to learn how to create a container paragraph type and nest paragraph items. We only skimmed the surface of what the module can really do.

In the last Paragraphs tutorial, you were introduced to the module and we created a basic paragraph type called Content. Want to learn more about Paragraphs? Then check out our online video course called “ Build Edge-to-edge Sites using Paragraphs in Drupal 8“.