Introduction to the Paragraphs Module in Drupal 8

hello and welcome i'm ivan from web wash 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 get bootstrap calm 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 a grid section here then you have another component section with a title and another grid now notice how in this design everything is 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 can reuse it throughout the whole section and then to handle the grid while that that's a bit more complex I mean you could do that in ckeditor or you could create a whole separate paragraph type for it so to answer the question what paragraphs does is 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 from 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 to hero image done they enter a name they would simply enter in a paragraph type for 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 what I want to do now is simply create a basic paragraph type using a vanilla Drupal 8 so here I've got my stocks then a 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 enter in the 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 now in Drupal a and also Drupal 7 if some things and entity especially a fillable 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 a 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 in any type of field just click on add a new field and you should see reference revisions just select paragraph and I'll call these 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 aloud 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 if none are selected then all are 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 and 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 the 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 one body one very original and let me just create another one and body - okay let's see it 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 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 these paragraphs widget now as you can see this page is pretty big with just two paragraph - with just two paragraphs now imagine if there's 10 paragraphs on a particular page and I've worked on sites that having 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 paragraphs widget yes it is called edit mode well so this option edit mode by default it's open and what that means is that the paragraph type renders or the paragraph renders the fields using its widgets so you can easily come in here and modify it but as I mentioned if you have a lot of paragraphs these 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 have ten paragraphs and you were looking for one particular paragraph but you have five paragraphs which are text and another 2 which are call to action or 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 and that's the best part of this is that the preview or especially how the previews 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 want to let's say we don't want to display the body field because the body fort 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'll 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 enjoy what you've seen don't forget to subscribe to our YouTube channel if you want to learn more about Drupal head over to where bashed on net where we have a 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

Channel: WebWash

Views: 35,614

Rating: 4.9840956 out of 5

Keywords:

Id: Fy9s01T30uo

Length: 10min 50sec (650 seconds)

Published: Mon Nov 14 2016