Skip to main content

A wagtail module for creating an image field with annotation metadata

Project description

Allows users to combine a Wagtail images with custom annotation data. Annotations are entered in the admin by clicking points on an image, annotation data is then stored with relative x,y coordinates and optional extra form data.


  • Wagtail >= 2.7

  • Django >= 2.0


Install using pypi

pip install wagtailannotatedimage


Extend the BaseAnnotationForm to define what data should be stored with annotations. AnnotationsField stores the annotations data as json, converting to a dict on retrieval.

from django import forms
from django.db import models
from wagtail.wagtailcore.models import Page
from wagtailannotatedimage.edit_handlers import AnnotatedImagePanel
from wagtailannotatedimage.fields import AnnotationsField
from wagtailannotatedimage.forms import BaseAnnotationForm

class AnnotationForm(BaseAnnotationForm):
    title = forms.CharField()
    about = forms.TextField()

class TestPage(Page):
    image = models.ForeignKey('wagtailimages.Image', blank=True, null=True,
                              on_delete=models.SET_NULL, related_name="+")
    annotations = AnnotationsField(blank=True)

    content_panels = Page.content_panels + [
        # First parameter - name of the image field
        # Second parameter - name of the annotation field
        # annotation_form - optional, the form used for annotations if you need to store data for each point
            'image', 'annotations',
            annotation_form=AnnotationForm(), heading='Annotated Image'
<div class='image-container'>
    {% image page.image('width-500') %}

    {% for annotation in page.annotations %}
        style="left: {{ annotation.x * 100 }}%; top: {{ annotation.y * 100 }}%;"
        <h3>{{ annotation.fields.title }}</h3>
        <p>{{ annotation.fields.about }}</p>
    {% endfor %}
.image-container {
    position: relative;

.image-container > img {
    width: 100%;
    height: auto;

.annotation {
    position: absolute;

Project details

Download files

Download the file for your platform. If you're not sure which to choose, learn more about installing packages.

Source Distribution

wagtailannotatedimage-2.7.0.tar.gz (10.8 kB view hashes)

Uploaded source

Built Distribution

wagtailannotatedimage-2.7.0-py2.py3-none-any.whl (16.0 kB view hashes)

Uploaded py2 py3

Supported by

AWS AWS Cloud computing and Security Sponsor Datadog Datadog Monitoring Fastly Fastly CDN Google Google Download Analytics Microsoft Microsoft PSF Sponsor Pingdom Pingdom Monitoring Sentry Sentry Error logging StatusPage StatusPage Status page