Introduction to the Paragraphs Module in Drupal 8

By: Ivan Zugec
https://www.webwash.net |   / webwashnet  

The Paragraphs module allows you to implement component based designs in Drupal.

A site builder can use the module to create components (paragraph types) for elements such as a hero image, banners or an image gallery.

Then instead of an editor adding content into a single body field, they could build a page using paragraph types.

I’ve written a fair bit about Paragraphs but they focused on advanced topics such as “How to Create Powerful Container Paragraphs in Drupal 8” and “Display Paragraphs Edge-to-edge using Bootstrap in Drupal 8”.

However, until now I never had a video about Paragraphs. A video is the best way to demonstrate the real power of the module.

In this video I cover the following:

Explain the problem Paragraph solves (15 sec)
How the module works (01:21)
Demonstrate Paragraphs module using sandbox site (02:26)
How to configure the Paragraphs field widget (06:49)

Transcript:

Read the full transcript at https://www.webwash.net/?p=710

Hello and welcome. I'm Ivan from WebWash and today I want to give you a quick introduction into the Paragraphs module. So, the best way to explain paragraphs is by looking at the problem first.

So, here I've got the Bootstrap site and you can go to it by going to getbootstrap.com. Now, how would you build this site using Drupal? So you have this hero section here that has a bit of text. You have a title and then you have grid section here. Then you have another component section with a title and another grid. Now, notice how in this design everything's broken out into separate components or separate paragraphs.

Now, if I was to build something like this using paragraphs, I could create a paragraph type called hero image or, jumbotron if I was using the Bootstrap term. Or here I could create a paragraph type with a title and a body field and then you could reuse it throughout the whole section. And then to handle the grid, well that's that's a bit more complex. I mean you could do that in CK editor or you could create a whole separate paragraph type for it.

So to answer the question, what paragraphs does it that it allows a site builder to break out the content into separate components or paragraph types and simply add fields to these paragraphs. Now, under the hood a paragraph is just an entity type and your paragraph types are just bundles. And you can attach fields to them the same way as you can to any other entity type.

Like user, content types, vocabulary, whatever you want. But, this then allows an editor to create a basic page and say okay, I want a hero image. Done, they enter in a, they would simply enter in a paragraph type for for the hero or if they, if they want to add image galleries.

Well then you just create a paragraph type for image galleries. If they want to add a grid, just create a paragraph type for grid. So, what I want to do now is simply create a basic paragraph type using a vanilla Drupal 8. So here I've got my stock standard Drupal 8 site and I've already gone ahead and downloaded and installed paragraph types, but to use, to download paragraphs all you need is paragraphs module of course and the entity reference, sorry the entity reference revisions module and that's it.

So, once you have it installed all you need to do is go to structure, paragraph types, and just click on paragraphs types. And, now entering a label for your paragraph type or components, whatever you want to call it. So I'll create one called content.

And now we need to enter in the fields. Notice how these tabs look familiar. That's because now in Drupal 8 and also Drupal 7 if something's an entity, especially a fieldable entity, you will get the standard manage fields, manage form display, and manage display.

So let's just add in two fields. We'll add in a text field for the title and a body field for the body. So for the body field text formatted long. Okay. We'll leave the form as is, that's perfectly fine, and we'll just remove the label. I mean who actually uses labels? Anyway, I'm sure somebody uses them. Okay. So right now we have created our paragraph type.

Now to attach it to an article or a basic page we need to add a paragraph field to a content type. So to do that let's just go to structure, content types, and let's add it to basic page. So to add a paragraph field, again it's the same as adding any type of field, just click on add a new field and you should see reference revisions. Just select paragraph and I'll call this paragraphs. You can call it whatever you want.