Wagtail API - show image URL on json output

Question

Fairly new to Wagtail - I'm currently creating a Wagtail API for my React app. Have installed successfully and am getting a json output, but not getting a url for images that are uploaded in the Wagtail admin panel. I have searched online, but not having much joy.

This is the basic home page model I have created

class BarsHomePage(Previewable, Themable, Page):

    bars_site_homepage_test = models.CharField(max_length=255, blank=True)
    feed_image = models.ForeignKey(
        'DemoImage',
        null=True,
        blank=True,
        on_delete=models.SET_NULL,
        related_name='+'
    )



    api_fields = ['bars_site_homepage_test','feed_image']

class DemoImage(Image):
    @property
    def fullwidth_url(self):
        return generate_image_url(self, 'width-800')

    @property
    def halfwidth_url(self):
        return generate_image_url(self, 'width-400')

    api_fields = (
        'fullwidth_url',
        'halfwidth_url',
    )

    class Meta:
        proxy = True

Json output

{
    "id": 504,
    "meta": {
        "type": "wagtailimages.Image",
        "detail_url": "http://www.lv.local/api/v1/images/504/"
    },
    "title": "Lighthouse.jpg",
    "tags": [],
    "width": 1365,
    "height": 2048
}

Thanks

gasman gasman · Accepted Answer · 2017-06-16T22:19:44

As of Wagtail 1.10, you can use ImageRenditionField in your page's api_fields definition to include the URL for an image, rendered at a size of your choosing:

from wagtail.api import APIField
from wagtail.wagtailimages.api.fields import ImageRenditionField

class BarsHomePage(Previewable, Themable, Page):
    # ...

    api_fields = [
        APIField('bars_site_homepage_test'),
        APIField('feed_image_fullwidth', serializer=ImageRenditionField('width-800', source='feed_image')),
    ]

Wagtail API - show image URL on json output

1 Answers