Custom representation of Streamfield in rest API

As of Wagtail 1.9, you can modify the API representation of the Block in the StreamField by overriding the get_api_representation() method on the Block.

For your example we can override the method on the ImageChooserBlock itself:

import wagtail 
from rest_framework import serializers

class ImageSerializer(serializers.HyperlinkedModelSerializer):
    class Meta:
        model = wagtail.images.get_image_model()
        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)

@wagtail.snippets.models.register_snippet
class MySnippetForAPI(models.Model):
    title = models.CharField(max_length=80)
    content = StreamField([
        ('heading', blocks.CharBlock()),
        ('paragraph', blocks.RichTextBlock()),
        ('image', APIImageChooserBlock())
    ])

Code updated for Wagtail 2.0+

https://github.com/wagtail/wagtail/blob/b6ee2db6ac8dbf4b47a81f4b2684b7aca8cc2501/wagtail/wagtailcore/blocks/base.py#L244


Adding onto the very helpful answer by probabble, you can also use get_rendition inside a StreamField block by adding a SerializerMethodField:

# serializers.py
# Explicitly importing since models are not loaded when serializers initialized

from wagtail.wagtailimages.models import Image as WagtailImage

class WagtailImageSerializer(serializers.ModelSerializer):
    url = serializers.SerializerMethodField()

    class Meta:
        model = WagtailImage
        fields = ['title', 'url']

    def get_url(self, obj):
        return obj.get_rendition('fill-300x186|jpegquality-60').url

# blocks.py

from .serializers import WagtailImageSerializer 

class APIImageChooserBlock(ImageChooserBlock):
    def get_api_representation(self, value, context=None):
        return WagtailImageSerializer(context=context).to_representation(value)

In this example, we only return the title and url of the image.

Tags:

Api

Wagtail