Headless Wagtail CMS: Custom Image Serializers

Hello again. In our last lesson, we discovered a tricky little bug where we could not turn an image into JSON in our Wagtail headless. CMS in our API. And I'm going to recreate that problem for you right now. So we were in our blog models, and the model that we were in was our blog authors orderable And we wanted to expose the author, but because the author is a foreign key to a blog author, we had to write a couple of properties. And one of those properties that we ended up writing was an image. And I'm going to duplicate that issue for you right now. Now the way that we got around not being able to access the image and the website.

And the name was by writing properties that traversed through self. author and then returned simply the name and the website as a property, and we exposed that property. So no big deal there. And I'm going to change this to image. So this is going to get self. author. image. That's this one here. And in our API fields, let's also add image. And I'm gonna boot up my browser, give this a nice healthy refresh, and we're going to see this ugly guy. What is this all about? Object of type images, not JSON serializable Well, I'm gonna say that error is probably properly named. However, I'm gonna say it is not not JSON serializable.

It is absolutely serializable. We just have to add our own serializer So let's again open up our editor, I'm using Visual Studio Code, and let's work with Django's Rest framework just a little bit Now this course is not going to dive into Django Rest framework really more than this to be honest. All we need to do is we need to tell our image to use a custom serializer. So let's go ahead from rest framework dot fields import field and this is simply a rest framework field And let's add a new class here. So let's call this a image URL field. No, let's just call this image serialized field. Something like that.

The name honestly is not super important. Now this has a method in here called to representation. So let's do def. to representation and the parameter list is simply going to take self and value And we are simply going to return a dictionary. So return a dictionary with a thing here. Let's do this. A thing here. something custom. And then lastly, if we go back down to where we're trying to expose our image, which is here. We can give this a custom serializer. So we say serializer is equal to, as you can see, by default it is none, but we want this to be an image

serialized field And that is a class. So you add the brackets. In the terminal, everything looks a-okay, so let's open up our browser and refresh. And we're going to see something interesting. So I'm going to scroll on down, scroll on down. And where we're working with is our blog authors. This is our orderable. Orderable ID of one meta. The type is blog. blog authors orderable, so we know it's an orderable because I named it explicitly. We gave it an author name, an author website, and the author image, as you can see, is a dictionary. With a key value pair of a thing here and something custom. And that really just matches perfectly, actually. It perfectly matches this dictionary right here.

Now let's say we want something to do with the actual image itself. We don't want to just hard code something like this. So let's create a key for the URL Let's create a key for maybe the title. Let's also create a key for let's see width and height. Width and height. And then for our URL, the key, or not the key, the value is actually going to be value. file dot url. The title is going to be value. title. Value, by the way, is our image. It's what we're passing in here. So if I scroll down, our value is whatever this is. And this is the image. So we've got value title in there, let's add a comma, let's add the width, value.

width, and value dot height Now this does not need to be called value. I guess we could rename this to anything we like. I'm just going to use value because that's sort of the stock way of describing this. So I'm going to save and refresh my browser, and we're going to see here that our author image is now the author image. It has the title and it has the uh the source, the source height and width. And that, my friends, is all we have to do to get this to work. Now you do not have to do this with just a custom image. You can do this on any field. Any field is serializable with a serializer parameter.

And you just give it the class name So I would urge you to try this out with website or the blog author name. And just change what it returns in here. Just test it out, get a feel for it. There's no better way to learn than to experiment. Now this has been a really straightforward lesson, nice and quick, straight to the point. If you want access to this code, you can always access it. from GitHub at github. com slash coding for everybody slash learn dash wagtail. If you want to see just this git commit, you can check out the link in the description down below. I will always leave you the gith commit link if there is one. My name is Caleb Tallin. I'm an author on LearnWagtail.

com where you can find more videos like this. If you found this to be helpful to any degree, don't forget, you can share, you can comment, you can subscribe. Or if you're going down the YouTube rabbit hole, you can always click the link in the top right to watch all the other videos in this playlist. Thanks for joining me, and I will see you in the next video.