Managing the layout for the article content type - Drupal Tutorial

- In this video, we're going to start updating our layouts for our various content types. Unfortunately, once I started doing this in the Breeze theme I found a couple of bugs. So until those bugs are corrected, this next set of videos we're going to switch back to the Bartik theme and then we'll switch back to Breeze in an upcoming video. Once those bugs are fixed I'll replace these videos using the Breeze theme. So please click on appearance, and we're going to set Bartik as our default again. Now the nice thing is with layout builder and our theme, it doesn't matter that we're doing layouts in Bartik because they're still going to work in Breeze. Once Breeze gets fixed and over to structure, content types, article and manage display. You remember we have three displays, default, RSS and teaser, head down to custom display settings and put a check Mark in full content. This is going to enable us to create a display when we're actually looking at a node in the full content display and click save. Now we have default full content, RSS and teaser. If we click on teaser, you'll notice that this is the standard look and feel and it works quite well for our article node. So we're going to leave that the way it is. However, go ahead and click on full content and scroll down and click use layout builder and allow each content item to have its layout customized. This will allow a content editor to update the layout for an individual node of the article content type, which is really powerful. Go ahead and click save, and now click manage layout. So, if I put a check Mark in show content preview this is what it's going to look like. The article type is of the top, that image, the body, our links field, our keywords, our video field and our PDF field or our document field. So, I usually do this with content preview turned off because to be honest, it just gets a little confusing and a little difficult to manage. We're going to create a quick layout here with the image, the article type, article keywords and image in a left-hand block, and the body in a right-hand block, and the video and the files below. So there are two parts to lay out builder, sections and blocks. Go ahead and click add section and you'll note you can do a one column, two column, three column or four column section, click on two column and you can split that by 50 50, 33 67, 67 33, 25 75 or 75 25. Let's go ahead and put it 33 67. And let's call this top section not very descriptive, click add section and you'll see a representation of the 33% and the 66%. All right, go ahead and click add block and you'll note you have access to everything. Triple nos, including all the views you've created, all of user fields, everything. Now there's a module that will restrict what you see here. And we'll cover that in just a little bit. All right, I said we were going to put the article type the article keywords and the image in the left field. So, find article type, we can display the title if we want, we can put a label in there, I'm going to make it in line. And we can say rendered entity, entity ID, or label we'll leave it at the label. And we'll link the label to the reference entity which gives us our taxonomy landing pages, click add block. Now, another way to do this of course is to just click and drag. So I'm going to click on article keywords and drag that under our type field. Oops, there we go. Of course, as you just noticed, you can rearrange as well. Now I'm going to drag the image field up and drag it back down, and then I'm going to drag the body over to the right-hand side. Of course, we could have clicked add block and selected any field in our content type that we wanted. Now, let's remove article type field because we don't need it anymore. Hover on the right-hand side, click on the pencil and click remove block, click remove, and it's gone. Let's drag our links below. So, now we have video files, links and comments. That's good enough for now. Let's go ahead and save our layout and click on the home button and click one of our article nodes. And now you'll see how this works. So article type, article keywords, the body field, our video field and our downloadable PDFs. So we've got a bit of an issue here. We really don't know what the name of those is. So let's go ahead and fix that layout. Now, if I click layout here, I'm going to edit the layout for just this node, which I don't want to do. So I'll go back to structure, content types, article and manage display. Make sure you click on full content and click manage layout. So we scrolling down, let's go ahead and fix those file field, click on the pencil and click configure, for the format go ahead and choose rendered entity. This is going to print out the name of the PDF and the view mode is full content. That's going to give us a link to the PDF with a little icon next to it. Click update, scroll up and click save. Head back to your site. And now we've got our PDFs looking a little bit better. If I click on it, it's going to load it in my browser. Now of course, with Bartik, our text isn't exactly great. But if I switch back to Breeze and go back to my site, you're going to notice that my lab builder layout is still intact. Now the image is bit of a mess, but nonetheless we can fix that up. So if I switched back to Bartik, and go back to my site, again, nothing is wrong with my layout. It's exactly the way it should be.