Wagtail CMS: Registering Snippets using Django Models

Hello, welcome back to another lesson on learning Wagtail. Today we're going to tackle a subject called snippets. Now snippets are essentially a way for you to use code over and over and over again Or rather, it's a way for you to use data over and over and over again. So let's say you have, for example, a blog author And you want that author to be reusable on all of your blog posts or any of your blog posts or maybe none of your blog posts Well the idea behind a snippet is you can register a Django model as a snippet and then you can use that blog author data over and over again instead of having to fill out their name and their image and their website. on every single blog post you can do it just once and reuse it.

So that's what we're going to tackle in this lesson And in fact, that's exactly what we're going to do. We are going to add a blog author to our models. py, our blog slash models. py. And we're not actually going to do anything with this. In this episode, all we're going to do is create a new Django model and register it as a snippet so it becomes accessible. That is, so it becomes accessible in our content management system. Now I am just going to CD website, my site, and pip and shell And Python 3 manage. py run server. Now it says this is already in use, so

I am going to go and shut down whatever else is using port 8000. Or as an example, we could always do Python 3 run server 00080001. This terminal is not liking how I did that. Okay, so now I can open this up in my browser. So if I just boot up localhost instead of port 8000, I can use port 8000 and 1. Ta-da! Site works. Cool. So there you go. A little trick. If you didn't know how to do that, now you do. You can reallocate the port. Away from port 8000 by default and you can use port 8001 or any other port number you want, assuming it's not already in use. So we can see in our left sidebar here there's no option called snippets And that's because we don't have any snippets registered.

So what we need to do is we need to go and register a snippet. Now before we can do that, we need the snippet to actually refer to some sort of data model. And that's where creating a Django model comes in. Now if you're not familiar with a Django model, basically it is it's a lot like a Wagtail page, only it doesn't come with the goodies of like a preview, submit for moderation. You know, stream fields, things like that. It's really just a block of data. Essentially in your database, all it is is actually just a table with columns in it. That's all it is. So I have blog slash models. py open and I'm going to create a brand new model in here. And I'm going to call this class blog author. And it's going to inherit from models. model, blog author

for snippets Now we have to think, what do we want to show on our page? What kind of data are we going to display from this blog author? Well, very easily we're going to use a name. And this is just pseudocoding right now, so we're going to use a name. Let's give them a website and let's maybe also give them an image so that we can have some sort of image rendition of what that person looks like. So a name is generally a char field, models. char field. Now in several lessons we have been using blocks. char block. Remember that is for stream fields, that is not for a Django model. Max length. Let's give it a hundred character max length. And that's about it. Website

models dot url field blank is equal to true, null is equal to true. Basically this is just an optional website. This is a URL. Maybe a blog author doesn't have it. Maybe they don't have a website they want to link to. That's okay. But every person has a name and every person will have an image. Now lastly, we need to link to this image, so we do models. foreign key. And we want to link to Wagtailimages. image. On delete, what do we want to do? We want models. Let's just set null Again, you could do cascade if you wanted to, but I'm just gonna keep this simple. Null is going to be true. Blank is going to be false though, and I'm going to give it a

Move that up here. Related name of something totally useless because I don't need access to that. Now at this point, if we were to run our migrations, this would create a new table called blog underscore blog author with three columns. It's got it's got a name, it's got a website, and it has an image, which would be a foreign key, basically just a number to WagtailImages. imageTable But because we are using Wagtail, this is actually not going to show up the way we want it to. Remember, anytime you want a field to show up in your Wagtail CMS, you need to use some sort of panel. Let's go ahead and create those panels now. Panels is equal to, and all this is is a list. So let's do a multi-field

panel. And you should be somewhat familiar with this by now, hopefully. And in this multi-field panel, we're going to have a regular field panel for our name, and we are going to have a image chooser panel for our image. And these are simply referencing the name here. You can see that it actually highlights. So we've got name on line 17 and name near the bottom here on line 30. And images on line 31 and also line 19. So that's where we're getting those from. Let's also give this a heading. Heading is equal to name and image. Alright, so we've got a multi-field panel in there. Let's also add one more multi-field panel just for our website. And this makes it extendable, so. Instead of just having a website, you might also have like a Facebook link or a Twitter link or something like that.

And you can totally extend it from here. We're just going to do something super basic though. So we're going to add another multi-field panel And again, it takes a list, and in this list is very simply a field panel for website, and that just relates back to our website name up here. Let's go ahead and give this a heading. Maybe let's just call this link so it can be somewhat generic and extendable later if you ever wanted to clone down this repository. What else should we add to this? We should probably add some sort of string so that if we were to ever grab this object in the Django shell or from Django's ORM or really in Python or anything, that This particular class will be referenced by the name. So it's not just going to say this is some sort of class object.

This is actually going to say the name of the person. Now let's go ahead and do that now. So we have def dunder. Self string repper of this class and simply return self. name. And lastly, let's add some metadata. No QA, please. Verbose name is equal to blog author. And this one is going to be verbose name plural is blog authors. Now let's oh there we go multi-field panel is not defined. I was going to make migrations, but that's not in there yet, so we can't quite do that. Let's go ahead and import that. Do we have here we go

And let's put this on a new line for us so that we can see all of this in one in one view. Multi-field panel and that just comes from Wagtail Admin Edit Handlers. Let's see if I'm missing anything else. Nope, looks good. Alright, what I'm gonna do here is Python 3 manage. py. Mama, make migrations. And then Python 3, manage. py, migrate. Booyah. Looks good. Run our server at port 8001. And at this point we're going to see absolutely nothing happen. So you can see that the page reloaded and nothing looks different. However, we do have a new table that can hold some new data.

Now in a typical Django, operation or a Django setup you would simply register this with your model admin and you could go and add it and you could go and edit blog authors all you like. But for us, because we're using WagTil CMS, which is a very nice extension of Django, we don't want to give our clients or even ourselves two admins to work in, because honestly, that's no way to live your life So what we're going to do is we're going to register this as a snippet. Now we're going to want to import our snippet. So let's do. from wagtail dot snippets dot edit handlers import register snippet And what I like to do is I like to go to the bottom of the class and simply type register snippet because it's a function, and then it takes our class name.

So blog blog author. Flake 8 is complaining because I don't have enough spaces in there. Okay, so we have an error in here. Uh can it import name and register snippets from Wagtail Snippets Edit Handlers. Oh, edit handlers. So if you're screaming at the screen right now going, Caleb, that's not the right place, good on ya. It's not Wagtail Snippet Edit Handlers, it's Wagtail Snippet Models. Edit handlers are generally for panels. Image chooser panel. We've got field panel, multi-field panel, document chooser panel. Eventually we're going to have snippet chooser panel as well. So if I change that, life looks good and when I refresh my page, we have another option here called snippets

And we have a snippet in here so you can have it register. So you can register any number of models that you like in here and you can access them completely. And this gives you full CRUD operations. So let's say you didn't just have blog authors, let's say you had blog categories, or you had menus, or you had help categories, or you had something that does not necessarily need some sort of preview functionality, such as in a Wagtail page. All it really is is some sort of data behind the scenes that we can link to. Blog Authors is a good example of this. Now this would show a list, but because we only have the one snippet, it's only going to show the one. So let's click on blog authors and let's add a blog author now. And this guy's name is going to be Caleb Tallin. That is myself. And let's go with this guy.

That's not me, but. That's fine. And a website is going to be httpslearnwagtail. com. I slam on that save button and If we actually had more blog authors. In fact, let's create one more. Let's create one more. Let's create my alter persona according to Google. Jacob Tavlian. Honestly, that is quite often what Google sees me as. And it's funny. Auto correct is a funny thing. HTTPS. Let's do codingforeverybody. com. Alright, now we have two different blog authors in here, and we can select these and we can delete them in bulk if we wanted to. This is a feature from Wagtail 2.

4 and forward. And all you have to do is select one or more, click delete. It will ask you, are you sure you want to delete these? So it won't just go ahead and delete, which is really, really nice. But now at this point we have our blog authors. And really this is not useful to us because what are we gonna do with this? We have data in here, but we can't access it from a page. Now if you're following this course from the very beginning, you will know that at any point in time is there custom context. Yes, you could add something like this where you have a context, authors. is equal to blog author dot objects dot all and that will give you all of your blog authors and then you can loop through all these if you wanted to

However, that's going to give you all of your blog authors and not necessarily the blog authors that are related to a certain blog post. So we're gonna have to go and add that. And I'm going to do that in the next video, so this one stays relatively short. But in the next video, we're also going to tackle orderables. So a blog post will have multiple blog authors. We're going to use an inline panel for that. In that orderable, we're going to use a snippet chooser panel, so we're going to be able to actually choose the snippets that we were looking at. So for instance, We're going to tell it to choose blog authors and it will give us a list of these blog authors to select. Just like an image chooser panel or a document chooser panel, the same thing happens here with snippets, only we control all of the data here. Alright, that is all I have for this particular lesson.

If you like this lesson, don't forget you can subscribe! My name is Caleb Tallin. I am the voice behind this video. And you can find other tutorials and articles much like this on learnwagtail. com. And if at any point in time I didn't go far enough into detail about how things work, you can always check out Wagtail's amazing docs at docs. wagtail. io.