Introduction to the Paragraphs Module in Drupal 8

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:

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

To watch the video, click on the play button in the header or watch directly on YouTube.

Are you using Paragraphs? Let me know how you’re using it by adding a comment.

Transcript

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.

Just call it paragraphs and make sure type of item to reference is paragraph, that’s important. And make sure allowed number of values is set to unlimited. Unless of course you want to allow one paragraph. And down here if we had multiple paragraph types you can actually choose which one appears in this particular field. If none are selected then all available, in our case there’s only one paragraph type, we’ll just leave it. So just click on save settings and over here you can control the widgets. We’ll look at this in more detail later on just update it for now then let’s just save it. And if we go to manage display. Let’s just hide the label. Okay, let’s now create a basic page.

Test page and down here you can see this one button, add content. That’s because we only have a single paragraph type. So if I click on add content. Title 1, body 1. Very original and let me just create another one and body 2. Now okay. Let’s hit save. Now you can see that our content paragraphs are rendering.

If you want to reorder them just simply reorder them and you can move them up to the top and click on save and publish and then you can easily just as, as you can see it’s very easy to move paragraph types around. Now the next thing I want to show you is how to configure this paragraph’s widget. Now, as you can see this page is pretty big with just two paragraph, two, with just two paragraphs. Now imagine if there’s ten paragraphs on a particular page and I’ve worked on sites that have even more paragraphs. This page will end up being very long and it can be hard to click and drag paragraph types around. So the next thing I want to show you is the edit mode. I think it’s called the edit mode.

So, let me open up another tab and I’ll go back to the paragraph’s widget. Yes it is called edit, ohh ohh. Okay, so this option, edit mode. By default it’s open and what that means is that the paragraph type renders, well the paragraph renders the fields using its widgets. So you can easily come here and modify it, but as I mentioned if you have a lot of paragraphs this can be difficult to order and also the page takes a lot longer to load. So what we can do is set the edit mode to closed and if I do that and hit save that means everything is collapsed. But the problem is you don’t know what’s in this paragraph.

Just imagine again you had ten paragraphs and you were looking for one particular paragraph but you have five paragraphs which are text and another two which are called to actual something. You would have to manually go into every single paragraph and go oh wait that’s it and then move it up. Again, it’s not that useful. It’s a good option, but just be aware of that limitation. But this does make it easier to move things around. The other option, which I find a lot more useful, is preview. So what this does, as the name suggests, it does offer a preview of the paragraph.

So let me save this and hit refresh and you see a preview. Now you can modify this preview and that’s the best part of this is that the preview, well especially how the preview’s generated. So the way it’s actually generated is if we go into paragraph types and go to manage display all it’s doing is rendering the paragraph using the preview view mode. So if you want to modify the preview just enable the preview view mode. Make sure you click preview up the top here and then just add extra fields or remove them.

It’s up to you. Let’s say we don’t want to display the body field because the body field can have a lot of content in there. You could simply disable it and then click on save and then if we update it you will see that you only have the title and that’s it. Thank you so much for watching this video.

If you want to learn more about paragraphs check out these two videos where I show you how to display paragraphs edge to edge and how to create a container paragraph type. As usual if you’ve enjoyed what you’ve seen don’t forget to subscribe to our Youtube channel. If you want to learn more about Drupal head over to webwash.net where we have a lot of tutorials about Drupal 7 and Drupal 8. Once again, thanks a lot for watching and I’ll catch you next time.