Headless CMS: Custom Wagtail Image Serializer

from rest_framework.fields import Field

class ImageSerializedField(Field):
    """A custom serializer used in Wagtails v2 API."""

    def to_representation(self, value):
        """Return the image URL, title and dimensions."""
        return {
            "url": value.file.url,
            "title": value.title,
            "width": value.width,
            "height": value.height,
        }

from django.db import models

from modelcluster.fields import ParentalKey
from wagtail.api import APIField
from wagtail.core.models import Orderable
from wagtail.images.edit_handlers import ImageChooserPanel


class BlogAuthorsOrderable(Orderable):
    """This allows us to select one or more blog authors from Snippets."""

    page = ParentalKey("blog.BlogDetailPage", related_name="blog_authors")
    author = models.ForeignKey(
        "blog.BlogAuthor",
        on_delete=models.CASCADE,
    )

    @property
    def author_image(self):
        return self.author.image

    api_fields = [
        # This is using a custom django rest framework serializer
        APIField("author_image", serializer=ImageSerializedField()),
    ]

class BlogAuthor(models.Model):
    """Blog author for snippets."""

    image = models.ForeignKey(
        "wagtailimages.Image",
        on_delete=models.SET_NULL,
        null=True,
        blank=False,
        related_name="+",
    )

    panels = [
        ImageChooserPanel("image"),
    ]