Wagtail CMS: Adding a banner and banner fields — Templates and Frontend Framework (Part 2)

Now I mentioned earlier we're going to uh start using Bootstrap and this is actually a good time to get into it. So I just made the text a little smaller because we're going to be adding a little extras uh pizzazz and these lines might get a little bit long. But the first thing we're going to want to do is actually install bootstrap. So if we go to get and let's get started. So we have a little CSS in here. This looks like it's from a CDN, so I'm gonna copy that or click that. And I'm going to open up base. html. And let's add some CSS in here. So we have mySite. css, but let's also add our global style sheet. So I just copied and pasted that into there And then lastly we need some JavaScript in here, so let's just copy all of those lines.

Open up your editor, whatever editor you want to use. Extra. js. You can see that there's a comment in here that says override this in a template to add extra JavaScript. Well, we could do that, but we don't want to actually ever overwrite these because, well These are going to be available on every single page, and it's important that these are available on every single page. We're going to actually use that extra JS block to add additional JS. So let's say we needed to add slick for a different type of carousel Or we had some extra JS that we found on a code pen, but we didn't want that to be available on every page, we would use the block extra JS. In this case we're saying load everything. So load all of the content from home page.

Then you've got your global JavaScript in here, which is going to be my site, which actually lets. Also move that down. I'm glad I discovered that real quick. So our global JavaScript is going to load in jQuery 3. 3. 1 It's going to load in Popper, it's going to load in Bootstrap, and it's going to load in our custom-owned JavaScript, which then can access anything else from jQuery or Popper or Bootstrap Now we're just going to save that and close it because that's all we need. Now let's go over to homepage and we need to add a banner. Now we can write our own CSS, we can do anything we want at this point. But because this is not a CSS or HTML course, let's be a little bit lazy here. So let's go into getbootstrap. com and let's find some sort of banner.

We want like banner type. um component um this'll do we are going to add a jumbotron so I'm gonna copy that and All I'm going to do is really paste this in here because we can access everything else. Well, we know how to access everything else. Okay, so uh indenting is being a little funny there. So we have a title. We know what our banner title needs to be self dot banner title and again if you're looking at this and you're thinking oh I don't know where to get banner title from uh we covered that in a previous lesson and just as a quick refresher banner title comes from

Banner title. Now the next one we need to add is our banner subtitle. We know that's a required field. So let's add our banner subtitle in there as well. Let's do this. Self dot banner subtitle with a U subtitle Rich Text That's going to throw us an error of some kind. So let's wrap that in a lead. We got div classes equal to lead. And let's go to the end, close that, div off. We've got an H4 in there. Do we need that? Not really. And a button, which we will come back to a little bit later. So let's add a to do in there.

And this just lets me search through all of my working documents and I can look for at to do and go, oh, this is not done. Okay. Usually I'll add a comment or something, but this one's pretty clear. The button is not done. Now if we load up our page, we're going to get an error. It's going to say basically rich text is not loaded And there it is, invalid filter called rich text. And we can see that right here. So let's open up our editor again. And this time at the top we need to add A filter to this page. So we need to add this filter called Wagtail Core Tags Now if you're wondering, Caleb, where did you get Wagtail Core from? That's a great question. Wagtail Core comes from, well

I'm I want the rich text tag. So that that's this filter right here. And Where did I get rich text from? Wagtail core. And so all I did was Wagtail Core underscore tags. Likewise, we're going to need an image a little bit in a little bit. So let's do Wagtail Images Tags. Same thing. And that's going to let us use a couple different things such as tags and rich text. Okay, so now if we go over to our browser and just do a quick little refresh because we just want to see what's going on here. This looks pretty boring. And in fact, we're actually missing a component here. If we go right click, add dev view page source, we can see that we don't have any source from our base.

html. We actually need that, otherwise bootstrap is not going to be loaded. So what we want to do here at the very top we type extend and as a string we want to put in base. html and that just says Use base. html as the base file, and wherever we have block content, inject our stuff into the old stuff. And let's also get rid of that in there. Now if we refresh our page. Oh baby, look at this. It's starting to actually shape into something. Now we need to add two more things. We need to add a background image and we also need to add uh an a conditional saying is this button actually even here. So let's add the conditional first because it's easy. So we're gonna say if self dot bannerca if there is no page selected, then

by default, Wagtail will say, oh, this is false or none and the template won't return anything. So we wrap that in an if and if And then this is our first little introduction to this really cool notion of images using Wagtail. So let's type image self dot banner. Image. I'll explain this in just a moment. Uh fill? Yeah, let's use fill. I don't know. 900 by 400, something like that as image. So here is a funny little thing. In Wagtail, we get a template tag called image. Its first parameter is the actual image itself, so This

will relate to our banner image here, which is our foreign key. And it's smart enough to work all of that out. Fill is what kind of cropping we're going to apply to it. Now I suggest that after this video. Go and look at the Wagtail docs about uh image fill, max, width. Um they have a bunch of different uh template tags in there for images or parameters for their image template tag rather Go and check them out. I'm not going to explain all of them. There's a few of them. They're quite easy to understand, but basically all this is doing is saying Take a 900 by 400 canvas and fill it with our image from here. Save it as img as the variable that we can now use in this template.

And then let's add our background. Using some CSS. So background image is equal to URL. Background size cover And let's put that image in there and we do image. url. And I'll make that smaller again. There we go. So all we're saying is take our original image, throw it into some sort of variable, make sure that it's cropped, and then we can access the image URL directly anywhere else in this template. So let's save this. Let's reopen Firefox or Chrome or Safari. And so if I select all, we can actually see that that CTA, that button does not show up. We have our text in here.

And also, uh the background size cover was a bad idea because that made the image far too large. Let's do contain, let's see what kind of uh mess this makes Okay, so uh it repeats, which is fine for our case. Uh you can adjust this as you need a little bit later And we might even actually make the site a little bit nicer as well. And we might come back a little bit later and actually rework some of the stuff to make it look better. So we have a proper demo site. And lastly, let's change that color to white Overwrite everything with important. Terrible CSS. That's a bad practice. There we go. Welcome to Startup Life. We help startups. So as a recap of what we've done in this lesson, we've added

a few new fields. So we've added an image chooser panel with A foreign key. We've added a page chooser panel. Chooser panel with a foreign key. We've added a rich text field, which is not a foreign key, but it is a mandatory field. And we've also installed Bootstrap 4. BS4, not to be confused with BeautifulSoup 4, so maybe I'll write that out. Bootstrap 4. And lastly, we added header. Nope, not a header. A banner. So that is all of this. This is what we did. Now if you wanted to get clever, if you wanted multiple pages that had a banner title, banner subtitle, banner image, and a banner CTA.

What we could do is we could add all of these into their own class. It would be an abstract Django class, and then I don't know, we can name it banner or something, and use it as a mix-in. Now we're not going to do that right now because again we're just working on something very simple for learning purposes, but maybe down the road we'll start to clean some of this up because there are going to be a few repeating patterns. So that's it for this extremely long lesson. We did a little back end, we did a little front end, we got bootstrap set up. Uh we worked with some foreign keys. Things are starting to sort of take shape. So if you're unfamiliar with anything that we talked about in this lesson, in this video, I would highly suggest that you go and practice it right now because these are all very, very common things in Wagtail websites.

Hey there, did you like this video? If you did, feel free to share it, feel free to subscribe, click that little thumbs up, leave a comment below if you found something was extremely helpful. And don't forget you can always check the documentation for Wagtail at Wagtail. io, and there are more tutorials a lot like this on learnwagtail. com.