Headless CMS: Serialize a Custom Image Chooser Block

``` import wagtail from wagtail.api import APIField from wagtail.core import blocks from wagtail.core.models import Page from wagtail.core.fields import StreamField from wagtail.admin.edit_handlers import StreamFieldPanel from wagtail.images.blocks import ImageChooserBlock from rest_framework import serializers class ImageSerializer(serializers.HyperlinkedModelSerializer): class Meta: model = wagtail.images.models.Image fields = ['title', 'file', 'width', 'height', 'file_size'] class APIImageChooserBlock(ImageChooserBlock): def get_api_representation(self, value, context=None): return ImageSerializer(context=context).to_representation(value) class NewsPage(Page): body = StreamField([ ("heading", blocks.CharBlock(classname="full title", icon="title")), ("paragraph", blocks.RichTextBlock(icon="pilcrow")), ("image", APIImageChooserBlock(icon="image")), ]) content_panels = Page.content_panels + [ StreamFieldPanel('body'), ] api_fields = [ APIField('body'), ] ```

``` { "id": 5, "meta": { "type": "news.NewsPage", "detail_url": "http://localhost:8000/api/v2/pages/5/", "html_url": "http://localhost:8000/goats-are-best/", "slug": "goats-are-best", "show_in_menus": false, "seo_title": "", "search_description": "", "first_published_at": "2020-01-29T01:36:59.248816Z", "parent": { "id": 3, "meta": { "type": "home.HomePage", "detail_url": "http://localhost:8000/api/v2/pages/3/", "html_url": "http://localhost:8000/" }, "title": "Home" } }, "title": "GOATS are the best!", "body": [ { "type": "heading", "value": "GOAT: Greatest of all time!", "id": "b51acbd2-ebc2-4d29-9976-26a0f9475426" }, { "type": "paragraph", "value": "<h2>Goats are awesome</h2><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam laboriosam consequatur saepe. Repellat itaque dolores neque, impedit reprehenderit eum culpa voluptates harum sapiente nesciunt ratione.</p><h4>Wagtails are awesome as well</h4><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet numquam asperiores, dolore! Animi, veritatis maiores. Vel magni dolorum, vitae eum ut culpa unde autem blanditiis voluptatibus tenetur deleniti suscipit officiis non molestias nam reiciendis. Corporis cupiditate non sapiente inventore, illum eum aperiam, veniam numquam adipisci nisi. Necessitatibus, sint aliquid iusto.</p>", "id": "a5b54e0a-454b-4ba5-9769-c537679b715f" }, { "type": "image", "value": { "title": "sergio-souza-2jXkA7GAz9M-unsplash.jpg", "file": "http://localhost:8001/media/original_images/sergio-souza-2jXkA7GAz9M-unsplash.jpg", "width": 3000, "height": 2000, "file_size": 1477606 }, "id": "41b3a3ca-112a-4cbb-8c5c-d0cb084b9fba" } ] } ```