Getting Started with Paragraphs and Bootstrap in Drupal

hi i'm ivan from web portion in this video you'll learn how to implement a bootstrap component specifically the card component using paragraphs and the radix theme which is a bootstrap for theme for Drupal 8 you'll learn how to create custom paragraph types and how to theme them using tweek you'll also learn how to create a radix sub theme and then at the end of the video or show you how to use the paragraphs libraries module to create reusable paragraphs so sit back and grab yourself a drink coffee or tea or whatever you drink really and enjoy the video so here is my stock standard a Drupal 8 site but Before we jump into things let's quickly discuss what we'll build so what I'll do is I'll go to the bootstrap site and then let's go to the documentation and then components and then let's click on the card components and what we're going to do is we are going to allow editors in Drupal to create these type of card components using paragraphs and if I scroll down down to card deck here on the right you can see that bootstrap has his concept of a card deck it essentially allows you to group cards okay and so we'll use the paragraphs module which will have an image field while a media floor technically a title field and a description and then we'll also chuck in a link field so that editors can add links at the bottom of the card and to implement the bootstrap side of things in Drupal we'll be using the radix theme so if you just search for radix Drupal you can see my one of my videos about it right here if you want to learn more about radix in particular but if we go to the radix project on drupal.org here you can learn all about the radix theme now radix is a bootstrap 4 theme which allows you to compile the bootstrap library locally using webpack and also it integrates with browser sink as well and it is my go to bootstrap theme for drupal especially because it supports bootstrap 4 so the two things we'll focus on in this video is one creating the paragraph types and two is creating a Radek sub theme and then implementing the card components using twig okay so let me just close these tabs and here is my stock standard Drupal 8 site as I already mentioned and if I open up my terminal let's go ahead and download paragraphs so to do that just type in composer require group or slash paragraphs and then give that a minute or two okay now that we have paragraphs downloaded let's jump to our site and then go to extent and what we'll do is we will search for paragraphs and then install the paragraphs module but we'll also search for media and install the media library because to handle the image I want to use the media field as well as the media library instead of just a stock standard image filter okay now that everything has been finally installed let's create the first paragraph type of but before we do that let's just quickly look at the mark-up for the card components and you can see here okay let me just bring up the inspector and I will zoom it in so you can all see it but if we have a look at these three cards okay you will see that there is a card deck div which wraps the individual cards so what we'll have to do is we'll have to create two paragraph types the first one will be the actual card with the with the actual image title and description and so on and so forth and then the second paragraph type will be called a card deck which will just have a paragraph filled with the card paragraph type so we're gonna have two levels of paragraphs okay now this may sound tricky but don't worry just follow along and you'll understand why okay so let's now jump back into into our Drupal site and what we'll do is go to structure paragraph types and we'll create the card paragraph first because that is the most complex one so click on add paragraph type and let's call it card you can call it whatever you want but I'll just call it card and then click on save and manage fields and the first field we'll create is an image field well technically a a media field but we'll call it image so if I click on add field and then search for media and the reference now if you can't see the media field make sure you install media library or the media module and I'll just give it a label of image and so and so this image field will be this image right here and then click on save field settings and then in the reference type select image as the media type so that users can only upload images which is very important ok and then click on save field settings again click on add field and this time we'll select text plane and then we'll call this one title and then click on save and continue and then let's make it required and then click on save your settings another one is let's add the description field so this will be text plain long I don't want the editors to be able to format the text so we'll just make it text long and then we'll call this one description did I spell that right yes I did and then last but not least let's add the link field okay and we'll call this one link but again you can call it whatever you want I'll just call it link and in the allow link text let's make the text required and then click on save field settings all right so let's just quickly do a quick quick comparison of things this is how I like to do things let's pop this to this side so we have the description field will be used for this bit of text the image field will be used for the actual image of course the link will be displayed below the description field and then title will of course be the card title okay pretty simple now let me just pop this back in because we need the space and then and then click on manage form display and from here you can control the widgets of the field and you can also reorder the widgets but let's just leave this order as it is because it actually follows the order of the fields on the card itself so image title description and link and everything is looking good and let's just click on manage manage display and and here you can configure the look and fill of the paragraph the only thing we'll change here is the label to hidden and that is about it and then click on save field settings okay so now let's go back to structure content types and click on add paragraph type and this time we'll create the card deck paragraph type and this paragraph type is actually pretty simple because it'll just have a paragraph field so just click on add field and then search for paragraph and then we'll call this one cards and then click save and continue' and let's change the allowed number of values to three let's just limit it down you can you can leave it at unlimited or you can set it to two five six whatever you want but I'll just set it to three and let's just make it make it required and then in the paragraph types section make sure you check card and that's it and then click on save settings now the only thing we'll do here well let's just leave the manage form display for now and click on manage display and let's just hide the cards and that's it okay so now at this point we have created our two paragraph types card well let me just show you card and card deck okay now let's test out our paragraph type and before we do that we need to create a paragraph field on an actual content type so let's go to structure content types and let's add it to the basic page so click on manage fields and click on add field and click on add a new field and scroll down to paragraph and we'll call these Swan paragraphs but you can call it components you can call it whatever you want I've caught up many things on many projects from paragraphs components modules but you can call it again what if you want and then let's just leave this as it is and then if you scroll down make sure you only select Kardec as a paragraph and then click on save few settings so now let's go to content and all before we do that let's go back and let's change the formatter so that the label is hidden and then now it will go to content add content basic page and let's call this one not a no test page and here we can see this massive form and you can see the card deck paragraph type and then straight away you can see the first card card paragraph of course this isn't the actual paragraph it's just the form to create the paragraph so what I'll do now is I will quickly go ahead and create three cards you okay so now I have filled out the form for three cards and then if we scroll all the way down and click on save we should see these three cards of course they aren't styled and they look pretty basic but they are there okay so now before we jump into the whole bootstrap side of things what I want to do is I want to show you how to modify the paragraphs widget because that is where a lot of the magic happens and if you are a content editor that is where you spend a lot of your time creating content and that is playing around with these fields now here you can see that these fields are pretty big okay there's a lot of content here and at this point I've only got about three paragraphs now I've worked on websites that could have 15 20 different paragraphs so you can imagine that once you create a bunch of paragraph fields with five or six individual fields then this form is going to get longer and longer and longer but luckily the paragraphs module has a pretty powerful widget where you can collapse paragraphs duplicate them and also reorder them nicely so let's take a look at that what I'll do is I will go to structure in another tab and then go to content types and then click on a manage form display on the basic page row and then if you scroll down to the paragraphs field you can see two options paragraphs classic and also paragraphs X experimental so click on experimental and then if you click on the cogwheel you will see a lot of options here so the two useful ones are paragraph title and also plural paragraph title so if you want to change the branding of paragraphs because he confuses users and you want to change it to say components here you can actually change the title which is used so instead of seeing paragraph and paragraphs in Drupal's back in UI you can actually change it to component and component and then you can modify the different edit modes summary modes you can edit a whole bunch of stuff but the most important option I want to show you here is the edit mode so if we select closed and then show nested ok and then click on update and then click on save down at the bottom and if we go back to our edit page now remember this form ok it's pretty big its clunky everything's expanded if you wanted to reorder this you know you really have to struggle just to reorder it I'm like twisting my fingers on my mouse to kind of move it around it's it's it's a painful experience ok now imagine you had a page with like 20 paragraphs and you want to move this paragraph from the bottom all the way to the top you know you're gonna be breaking your fingers doing it but now if we refresh you will see up here that this widget has changed but and this is important we need to change the paragraphs widgets on the card deck paragraph because remember we created a paragraph field on the card deck so now we're kind of playing this whole paragraph inception because we have you know a few levels now well we only technically have two levels of paragraphs but we do have a paragraph field on the content type so it goes from the paragraphs fueled on the content type to the card deck to the actual then card anyway so what we need to now do is jump over to structure paragraph types and then make the same change on the card deck so if we go to card deck click on manage form display and then change paragraphs classic to experimental and then change the edit mode to closed show nested and then if we go back here and refresh you will see that now the UI is much nicer so the few cool things you can do from here is well first of all you can reorder things much easier okay another thing you can do is if you click on say this dots here all these extra options button I believe you can duplicate it okay now the ability to duplicate I believe is only available in the paragraphs experimental okay so so if you want the ability to duplicate make sure you are using the experimental another cool thing you can do is also expand the cards if you want let me just edit that so kind of collapses it everything you can also edit all of them okay if you want and then you can also collapse all of them and then another thing you can do is if you click on this option okay you get this drag and drop now this is pretty cool you can actually move things around between the fields okay so you can imagine if you had a bunch of paragraphs you know this will make life much easier when it comes to reordering things so if you're going to set up paragraphs on a Drupal site I would highly recommend that you use the paragraphs experimental but make sure you just test things out because it has the word experimental in here so just be careful with it you know just give it a good test and see how it goes and also have a play around with all of these options I could probably spend another half an hour talking about all of these options and why you would use them but just have a play around with them as well okay so I think at this point we have created so let's go back to our test page okay we have created our card paragraph type we have created our card deck and we've also created our paragraph field on the basic page content type now let's go ahead and download radek's and implement this card components so the first thing we need to do is download radek's so open up your terminal go to your Drupal site and type in composer choir group or / radix and then give this a minute or two okay so now that we have downloaded radix let's go ahead and create a sub theme now luckily for us radix has a brush command so what I'll do is I'll first clear this and then type in brush radix creates now if you run this okay you'll get this error now because I've got a tutorial on using radix I get a lot of comments from people saying all your videos don't work or your tutorial is wrong it doesn't work blah blah blah okay now I want to finally show people how to generate a radix sub-theme and I'll also update my older video as well but what you need to do is you can't just run crush radix create okay that'll be great what you need to do is you need to include the path to to the actual radix theme okay so if I was to type in add Rush and then include equals themes slash contrib let me get that right and then it slash radix now let me open up my text editor or my IDE one thing to be aware of is that you have to make sure that this path is is perfect okay because if I was to type listen okay what is it radix create it's still not going to work and why is that because you know you know the path is theme slash contribs but if I check my path you'll see that Drupal is in a folder called web so what I need to do is let me just clear this oh it's right at the top what I need to do is I need to add in either web slash or I just need to go into the web directory and then I run the and finally you can see that the command has been found and of course the name argument is missing but it is important it is imperative because I know I'll probably get comments about this that this path has to be relative to the path that you are in right now so make sure you run that now another thing you want to also do is enable the components module now the components module comes with radix radix has a dependency on the components module and it is an API level module there's nothing to really use in the backend I all you need to do is just install it because it is how radix manages its tweak it's tweak templates so what you want to do is just install components and then if we go ahead and then simply run the command and now you can see that the command has run and our sub-theme has been created so if I go into phpstorm you will see that here we have a custom folder and then in it we have radix paragraphs okay this is our this is this is our sub thing which we just created and here you can see he's got its got like a a yarn lock file a package lock file and it also comes with web pack already pre-configured well it's technically laravel mix which is great and now what we need to do is jump over to our Drupal site and simply install it so let's go to well let's close off a few of these browsers tabs so let's go to appearance and then click on and scroll all the way down and you should see the sub theme which you just created and then click on install and set as default and then if we go to the home page you will see that nothing is working well first of all we need to compile bootstraps so let's go jump back into our terminal and let's go into themes and then what is it and then radix and then what we need to do is run npm install and give that a minute or two and then run npm run and then dev and this will compile all all of bootstrap and then generate a dev version of it so now if we go back to our sites refresh and that is not working because chances are we need to turn off CSS and JavaScript aggregation so let's just do that let's go to performance and then if we refresh one last time hopefully if they will be working and yes you can see that bootstrap styles are coming through but you will notice that these blocks look kind of broken and so what we need to do now is we need to reorder the blocks and put them in specific regions but luckily for you I have already documented this in one of my earlier radek's tutorials so if we search for Drupal radix web wash should be number one results if not I'm doing a terrible job at writing content and so go to this getting started with bootstrap form and if I scroll down where is 30-some somewhere here okay go to the add blocks to the right region and there should be a link to this section below this video and what we need to do is we need to add all these blocks into the correct regions well the most important ones are main navigation and also user account menu so what I'll do is let me just pop that out and pop that to the right and pop this to the left and then let's go to structure let me just close that and then block layout and what we need to do is pretty much this match up these regions and these blocks so go ahead and do that now so I think now all the blocks have been reordered quickly which is great so now let me just make that for width and if I go to the home page you should see everything's looking good and then if I resize let me just resize this to mobile what does it look like where is up the top here you can see now that yep the actual menus looking good perfect okay so so now at this point we have a working sub theme now let's do the fun part and implement the card using tweak okay so let's take a look at our card markup so essentially we need to implement this so what we have to do now is we need to add out of this class to the card deck paragraph now if this is the first time you are doing any type of group or template in the first thing you'll struggle with is trying to figure out which template to override and also where is that template because if you have a look at the markup okay let's let's let's take a look okay there's a lot of markup here but it really doesn't tell you where it is okay and so what I want to show you now is how to turn on tweak debugging which will tell you exactly which template is being used so you can easily find it and override it so to find the steps to configure tweak debugging just search for Drupal twig debugging and there should be a group all documentation page and what we need to do is we need to go and edit our code so let's go to our site go into default and then open up settings dot PHP and then scroll all the way down down to the bottom and then comment out this section so that so that it actually uses the settings local dot PHP chances are if you are building a proper Drupal site you should have this uncommented anyway and then what we'll do is we'll simply copy this example the settings not local into the default directory and then if we scroll down you'll see this container Yama's which is pointing to a development version of services dot yeah more so if we have a look at this development services yeah more now what we need to do is we need to change this parameter and switch on tweak-d bugging so to do that let's go back to this beautiful documentation and just grab this bit of code so twig config and then debug true and then let's just pop that in and then we want to do drush CR let's just rebuild the case and then if everything has been set up properly let's refresh give it a second or two and then if we inspect whoa you can straightaway see all of these comments here okay all of these comments so let me make a bit of room here if we have a look at say this comment for example our sorry this image for example you can see exactly which which tweak template is being used but more importantly you can actually see the file name suggestions so if you want to override so I want double click on this you can have a look at the file name suggestions and this allows you to specify certain tweak templates on specific fields depending on the file name suggestion so essentially what we need to do now is we need to find the card deck paragraph which is right here and then add in the class card deck that's that's essentially what we need to do so we have two options okay we could override these templates and then give it a filename of paragraph - - card so that the template only gets loaded up for for the car detect paragraph but that's a bit of an overkill - to simply add a class luckily we can use a preprocessor for that okay Drupal allows us to do that now a preprocessor is a function which gets called before variables are passed to the tweak templates and it just saves you from having to override a tweak template but you need to manage and maintain a bit of code but the code is very simple okay so what I'll do is open up a schmee storm and then go to themes I've just closed all of these stuff go to themes radek's open up red X underscore paragraph start themes and then type in function and then radix paragraphs you can see that P appear to be storm does a whole bunch of stuff here what I wanted to do is get this one and then in the hawk type in paragraph double underscores then card deck okay so this means that we are adding in a preprocessor for the paragraph template but only if the paragraph is a card deck paragraph type and then here all we need to do is add in so variables and then buttes then class and then card deck so this will add in a class to the rapping diva rounder because if we open up paragraphs you'll see and so this is the template that we are pre-processing you can see that attributes is getting added okay so if you compare it this is the attributes variable gets passed to here so now if everything is working so let me just double check this so that means that on the card deck paragraph type which is very important because this template is used across all of the paragraph types only on the card deck will add this class court card deck to the attributes to the attributes variable or array which is which then gets added to this deal okay so now if we save that and then dude rush CR and then jump into here and do a refresh of course we're not gonna see anything groundbreaking straight away but we should see and then here you can see that the card deck class has been added okay so now we need to work on the card component okay so if we jump into the bootstrap documentation you will see that there is a bit of bit of markup which needs to be created so for this will actually override the paragraph template because it makes perfect sense to actually do that so let's jump over to phpstorm and what we'll do well let's have a look at the mark-up first and if we have a look at the card let me let me make a bit of room here you can see Carter dick yeah that's fine then you have the individual items and then you have the actual card itself so what we want to do is we want to add in so let's just actually test it out now let's add in card you can see that the card stuff is getting added okay it's kind of getting added store needs to be fixed up but we also have a whole bunch of markup which we need to clean up which we'll do in a second but what I want to do is I want to change all of this markup so that it matches kind of it does have to match perfectly but so so that it kind of matches this markup okay so we have card body card title card text so on and so forth and that's the thing about Drupal ok Drupal loves to generate markup you know if you use panels in Drupal 7 that I'm sure you're aware of the diva per you know issue where it's like 5 or 6 wrapping devs and all that but you know things are better in Drupal 8 thanks to twig but you know Drupal likes to generate a lot of markup so what we want to do now is override this paragraph template on the card paragraph type so what we're going to do is we are going to copy so I'll just copy this template so just copy it I'll copy the whole thing and then go into templates in the sub theme and I will just create another folder called paragraphs and then I'll paste in I'll paste it in but make sure you give it a name ok - - card ok so this card is the machine name of the paragraph type so that group will only uses this template for the card paragraph type and then if we scroll down ok the first thing we need to do is add in the card class okay simple now the next thing we need to do is put in the image title or description and also I think the link yes so now we are going to roll our sleeves up and write a bit of a tweak so the first thing we want to do is add in the image okay so the image will will actually stay if we have a look at the the card you will see that image is just below the card div and then everything else is pretty much in the card body div so if we come back to Pier to be storm let's put in the content dots and then field image okay this is the actual image and then if we type in let's create another div sorry quote card body and then in here we want to add in the what is it it's a quick look well let's just put this to the side so I've got it here and there's pop this to the side okay so what I want to do now is do an H 5 so that is what is it H 5 and then card title and this will then be content field title and then the next one is I'm sorry it's a P tag and then card text and then again let me just copy this so I don't have to type it is this will be field description and then let's move the content over into the card body but one thing to be aware of is that right now this content variable will display the field the field image the field title and the field description here as well as through here so what we need to do is we need to tell twig not to load up the fields sorry not to display the fields which we have manually displayed above so without and then that would be field title field description and then what does that feel uh sorry field title and then any other field will simply be rendered out through this content variable okay so so far so good let's just let's just close that off let's open this up let's hope this all works let's jump over here and run you know drush CR now you can't actually turn off caching but that really slows things down so you don't have to run try CR all the time but let's just hit refresh and see what happens this is the moment of truth okay so first of all we can see that okay the cards are kind of looking like cards but they're not floating correctly it's kind of like double yeah it's not actually displayed twice why is that and this is kind of the fun part of debugging things so let's have a quick look so we can see here card image that the da da so if I take our look at okay let's first of all let's figure out if our template has actually loaded up okay that's the first amount this is so annoying well let me pop it to the left ah that's better alright let's just close this off there's not much space here is there so what I want to find out is why the hell is this not loading up properly all right let's take a look at our markup so a PPP okay so content without your title Oh image no that's going to stop image from displaying ten times all right now we're getting somewhere all right all right all right okay let's now take a look at this this is coming along nicely you can see that if we scroll up up up up up card image paragraph where what am I looking at okay so we have card image perfect then we have our actual cards and then we have the image down I sorry the the link down at the bottom okay so everything's coming along nicely but it's still not let's just pop this back down if we have a look and let me just zoom out a little bit it's not it's not floating correctly why is that now if we jump back to bootstrap you'll see that you have card deck and then straight away below it you have card and then each card straight away below card deck but if you have a look here Drupal being Drupal of course it has to it generates a bunch of markup before it gets to the actual card so we have card deck here but then it's got this card a deck fields field items on and so forth okay so what we now need to do is we need to override this field templates but one thing to be aware of is that this field template so this field dot HTML dot twig gets used on every single field so it's used here if we scroll down it's used here okay we can't just go in there and override the general field tweak template because it's used absolutely everywhere but luckily for us we can override the third template which is just used for the card deck field okay well well the cards paragraph field on the card deck we can override it just that tweak template so what we'll do is let's go to well let's first of all find the template because one little tricky thing to note is that let's say with paragraphs okay where is it paragraphs you will say that yes this paragraphs is getting loaded up out of our template but originally it was coming out of the paragraphs module but if you have a look at the field so where is it it's here you will see that you know what is actually coming out of the radix base theme because because the radix base theme which our sub-theme uses is overriding the field the field a template so what we need to do now is we need to go to radix templates field and then simply copy the field dot HTML twig and then paste that into the fields folder in our sub-theme and make sure very important that you change the file name to paragraph - - field - cards and then hit refactor and what we're going to do here is we essentially need to remove all the mark-up from here now if I was implementing this on a prop bar website I probably spent a bit more time with the mark-up especially because if you have a look here there's a lot of if statements if you are displaying label if you're not displaying a label like hidden label if the field has multiple values or if it has one now luckily for us in this case I know that this field okay will never change so what I can do is I can go for the full nuclear approach when it comes to cleaning up markup and then literally just deleting it and pretty much pasting in this little bit okay so this is simply a a for loop which loops through the content and that's it so this will take away all the divs between card deck and card so let me just say that's and then if I run rush CR each sword the moment of truth don't under he should now pop up nicely in columns a there we go perfect I should I should have a little laugh track honor and applause track so now if we have a look you can see that we have our where is it our card yes perfect but then most importantly below card deck which is above here we have our cards directly now sometimes you may want to turn off this actual tweak debugging because it can get in the way especially if you want to try and figure out what you know which Deeb's are where because you can you can sometimes be hard to figure out you know how many devs are armed because the sermon is so many comments so you may want to turn it off but for us right now it makes perfect sense to have it displayed but here you can see that yes we have the card a deck then straight away we have the card okay so I think that use if we have a look at our markup yes we have an implement at this type of stuff but you can go ahead and implement this yourself if you really really want to but if you want to have a look at the kitchen sink as this example shows you can chuck in a lot of stuff so you could probably create another list field that can easily list out you know items or something you know there is a ton of stuff you can do and the best thing about it is that with paragraphs and radix and edit I can come in modify this and then click on click click on edit make changes hit save and create this card component ok so now that we we are at the tail end of this video that's pretty much it for using radix and creating the card component so if you want to finish off now you can but one thing I do want to show is how to use the paragraphs library because one thing you might notice with paragraphs is that over time if you were to use power on a large website you have a lot of pages and then you would have a lot of paragraphs now can you reuse paragraph components because when you start using paragraphs you really start thinking about creating reusable components for your editors now a couple of years ago you really couldn't reuse paragraphs you couldn't create like a paragraphs library where your editors can just copy paragraphs and then just attach the paragraph to multiple pages but luckily now there is a sub module chord hence the name paragraph library which allows you to create reusable paragraph entities which you can then add to multiple pages and this is huge I mean I remember a couple of years ago editors asking for this stuff so setting it up is actually relatively simple you can set up in about five minutes and that's why I want to show you right now so let me just close these tabs and then if I go to extent and then search for paragraph and then of course just install paragraph library but before you install it that's right I forgot there is a module we need to download so that is drupal entity usage so go ahead and download this module it is oh it is a beta 3 which is great essentially it tracks the usage of an entity used in all of these the order types anyway we're not going to really cover this module but just go ahead and download it so what I'll do is I'll just copy that machine name of the project and then type in well I need to go back just give me one second go back to composer one more and then just type in compose are require group or slash entity usage okay so now that we have downloaded entity usage let's go back to extend page and then if we search for paragraphs paragraphs can't spell and then okay we can install paragraphs library and then just click on install so now go to content and then paragraphs and then here you can see all of the available paragraph items but we don't have any so that so the first thing you want to do is click on add add library item and then give it a label so let's call these food are cards you can call me whatever you want okay and then here you can select all of your paragraph types so for us we'll just call it add so we'll just click on add card deck and let me just quickly create another paragraph sorry card paragraph I'll call this one footer one and then link and let's just leave it as it is can't be bothered creating another card and then as you create your library they will appear all here okay now to add this paragraph type to a page what we need to do is we first of all need to modify the basic page because if we come here okay let's just edit our basic page you will see that we can only add a card deck we cannot add in add in any other paragraphs so what we need to do is go to structure content types and then click on manage fields on basic page edit the paragraphs field and then make sure you check from library so from libraries kind of like a pseudo paragraph type which allows you to reference other paragraph types I've probably said paragraph ten thousand times in this video but that's what it essentially does so click on save settings and then if we go back to our page and we can see see the add from library we can select it and then we can enter in the label which is for two cards and then we click on save and then you can see that our food our card has been added in of course you know the padding between the paragraphs can't be fixed up and the image style for this card three can go for with whatever now the last thing I'll show you I promise you the last thing I'll show you is if we go to content and then paragraphs you will see this used column okay and then if you click on it it'll tell you which field it's attached to but if I was to edit well let me just open something another term I'm sorry on the left let's close all this so that it's more interactive I still have just one page okay the test page if I come here click on edit and then I scroll down and click on save and hit refresh you will see that the used column goes up he says now - okay and if I was to click on save again on the same page what do you think will happen again refresh and now he says three okay now one thing to be aware of because I'm certain I'll get comments about this is that this value in the used column tells you how many revisions this paragraph is attached to not the pages entity usage when it comes to tracking paragraphs doesn't really care the page that it on okay it will only track the amount of revisions which the paragraph is attached to but then if you actually click on the number you should then see exactly which field it is part of and then if you click on it it takes you to the actual node okay so you can easily figure out which page it's on but if you look at this number this might seem a bit confusing especially if you create a paragraph type and you're like wait a minute I've only added it to one field or you know one one page why does this keep going and if you add a paragraph type to say the home page and you're editing that every few months it's gonna slowly add up and so yeah you might get confused by that so anyway so that is it for this video thank you so much for watching I hope you have learnt a lot because we have covered a lot in this video from creating paragraph types to learning about the different paragraph widgets to implementing bootstrap components using radix overwriting templates creating a sub theme in radix and finally learning about paragraph libraries so if you want to learn more about Drupal head over to wear blush dotnet and also don't forget to subscribe to this channel and also if you want to check out our free courses just head over to where Bosch Nets anyway thank you so much for watching and I'll catch you next time

Channel: WebWash

Views: 9,462

Rating: 4.878788 out of 5

Keywords:

Id: ZSdIX-i394U

Length: 53min 33sec (3213 seconds)

Published: Wed Apr 29 2020