New Wagtail Course! 🥳 The Ultimate Wagtail Developers Course

Tutorial Wagtail Version: 2.x

Headless CMS: Serialize a Custom Image Chooser Block

Learn how to serialize an ImageChooserBlock in your StreamFields to output the image data you're looking for.

``` 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'), ] ```

Which will output JSON that looks something like this:

(Note: The part you're looking for is the body[2] ("type": "image") on lines 35-43)

``` { "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" } ] } ```

Related tutorials

The Ultimate Wagtail Developers Course

This course covers everything from basic installation to advanced features like custom blocks and API integration, it's perfect for developers looking to enhance their skills with this powerful CMS.

Ultimate Wagtail Developers Course Logo