Headless Wagtail CMS: Wagtails Built In Image Rendition Field

Hey, welcome back to another lesson on learning Wagtail. Uh we're sort of in a sub-series right now where we're talking about Wagtail's headless API. where we can basically JSONify everything inside of Wagtail so that a front-end framework like React or Vue or Angular can consume it. In the last video, we created a custom image serializer. So basically we created a Django REST framework serializer in order to get around a problem that we had, and we Returned the URL, the title, the width, and the height. Now all of that is great. I think we did some pretty good work there and we learned something valuable. But in all honesty, it was a little bit overkill. And there's actually an easier way to do this.

And the easier way to do this actually comes with custom height and width And you can use Wagtail 's images in order to do this. Now what I'm talking about is the image rendition field. And the first thing I'm going to do here is before we even get started, I'm just going to import this. Uh do we have Wagtail images? Nope. Okay. So from Wagtail, sorry, let me move that up. Wagtail dot images. api. fields import image rendition field. This is what we're looking for right here And we're going to ignore our custom serializer in here. And in fact, what I'm going to do is I'm going to comment this out just for reference in the future.

If anyone else wants to use the Django Rest framework way of viewing things in the future, they can just simply uncomment this. But what we're going to do here is uh we're going to use the image rendition field. So the serializer Can actually go away and uh let's yeah, let's put this on separate lines because this is going to look nicer in video format So our serializer here is going to be the image rendition field. And we are going to fill this just like we would with a regular Wagtail image in a template So let's say we wanted to f we wanted to create an an image rendition uh that would fill a space of 200 by 250. I just threw in random parameters in there.

And the source is going to be author image. So let me explain this. Very briefly. And let me again throw this on different lines. So we have an API field called author image. Now, I believe off the top of my head, if the author image and the source is the same name, it's actually going to throw a redundancy error. It's going to say that it's redundant to have that. So let's change this to anything else. Let's just call this image And I'll show you where this comes into play in just a moment. We gave it a custom serializer, a Wagtail one, called Image Rendition Field. And we said, take that image, give us a new rendition, but fill it with 200 by 250.

Just like we would in a template. And that source is our author image. Now if you're just coming into this video, this author image is actually on an orderable, and this orderable only technically has two fields. It has page, which is a parental key, which will actually connect it to. The blog detail page using a related name called blog authors, unimportant in this video. And we have a second field called author, and that is a foreign key to blog. blog author, where if I scroll down, we've got blog. blog author right here. and has access to name, website, and image. The reason we're using a property called author image is because we can't simply type in image

or actually that's the wrong way to do that. We can't simply type in author image because that won't work for us. So what we did was we said, oh, okay, well, we're going to create a new property. New Django property. And all it's going to do is return self. author. image. And now we have access to it in this particular class. And we can expose it, which is what we did in the last video. And that source is exactly where this is coming from. Now if you're on a Model that already has an image field. So let's see if I can find one. Wagtail images. Not blog author. That's a bad example. Banner image. And this is on the blog detail page. So if you had an API field in here, you would not need to reference it using a property

because this property already exists. You would simply call it banner image. But because there is no property on this particular class, the blog author is orderable, we needed to create a property to access it. And again, that source is just that property. Okay, so I'm just gonna save this and then I'm going to open up Firefox and I'm going to see that my image field has changed. In the last two videos, this was called author image. In this video, it's going to be called simply image. And let's go ahead and open up Firefox, then refresh. So here we have our image. And again, I said I was going to mention what that is. That's this guy here, so we can call it image, anything, test, something super ugly like that. And it's going to change

This key right here. Image anything test. And where that source comes into play is the author image, it is right up in here. So it's just grabbing the image from a foreign key and it's saying Create a new Wagtail image rendition, fill it with 200 by 250. And we can see here that there is a new image rendition. We can see that says fill dash 200x250, and the width and the height are available to us. So that's actually a shorter method of solving last video 's problem where we weren't able to uh serialize or turn into JSON an image field. Now there are pros and cons to each. In the first video, the prior video actually

I created an image serialized field And all I did was give it the file URL. I didn't create a custom image rendition. I didn't give it a certain size or anything like that. All I said was give us the original image. So there's a con there. We can perform some additional logic in here and get an image rendition, and that would be totally fine. But that means we have to write a little extra code to get that. So that's sort of a con. The pro to it is that we can add anything that we want to our image serialized field. Within Wagtail, without Wagtail, it doesn't matter we can add anything we like. So totally customizable The pro to using an image rendition field though is you simply give it a parameter of whatever you want to fill it with.

Wagtail will parse this. string and say, yep, okay, I know that you want to fill it with 200 by 250. I'm going to do that for you. And I know that your source is some custom source. It may not actually be this field here like what we see here. This one was our source and we actually said we wanted to change that. So there's a little customizability, a little flexibility in both options The major benefit though is image rendition field actually allows us to create a custom rendition with I mean technically I could sum this up in one line of code, uh, but I have it in four lines of code for clarity and and to make it nicer to watch in a video. So yeah, there are pros and cons to using either method. Uh there's not really any right or wrong way

or uh a time to use one or the other. That's totally up to you Generally, my rule of thumb is to stick with the least amount of code that is maintainable and readable. So don't be overly clever But also don't write too much code. It makes maintaining your code a little bit harder. So I think for a simple image field, the image rendition field is generally best, unless you need something A lot more custom, a lot more data, if you maybe need to perform some additional logic, then yeah, use a custom serializer like what we have here, the image serialized field. Now again, that's just two ways to handle this situation. And of course, you can find the link to this commit in the description down below that will show you all the changes in this

in this file, everything we've worked on in this particular lesson. And just as a quick mention, you can do that with any video, so if you weren't sure where we left off three videos ago, you can always check out that git commit as well. My name is Caleb Tallinn. I'm the voice behind the video. If you like this video, don't forget you can share, you can subscribe, you can comment. I love hearing feedback from people. If you're interested in more videos like this, you can always check out learnwagtail. com or click that box in the top right to view this entire playlist on YouTube. Thanks for watching, and I'll see you in the next video.