Metadata-Version: 1.1
Name: wagtailannotatedimage
Version: 2.7.0
Summary: A wagtail module for creating an image field with annotation metadata
Home-page: https://github.com/neon-jungle/wagtailannotatedimage
Author: Neon Jungle
Author-email: developers@neonjungle.studio
License: BSD License
Description: Wagtail Annotated Image
        =======================
        
        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.
        
        .. image:: https://giant.gfycat.com/SpeedyHospitableHornet.gif
           :width: 728 px
        
        Requirements
        ------------
        
        -  Wagtail >= 2.7
        -  Django >= 2.0
        
        
        Installing
        ----------
        
        Install using pypi
        
        .. code:: bash
        
            pip install wagtailannotatedimage
        
        Using
        -----
        
        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.
        
        .. code:: python
        
            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
                    AnnotatedImagePanel(
                        'image', 'annotations',
                        annotation_form=AnnotationForm(), heading='Annotated Image'
                    )
                ]
        
        .. code:: html+Django
            
            <div class='image-container'>
                {% image page.image('width-500') %}
        
                {% for annotation in page.annotations %}
                <div
                    class='annotation'
                    style="left: {{ annotation.x * 100 }}%; top: {{ annotation.y * 100 }}%;"
                >
                    <h3>{{ annotation.fields.title }}</h3>
                    <p>{{ annotation.fields.about }}</p>
                </div>
                {% endfor %}
            </div>
        
        .. code:: css
        
            .image-container {
                position: relative;
            }
        
            .image-container > img {
                width: 100%;
                height: auto;
            }
        
            .annotation {
                position: absolute;
            }
Platform: UNKNOWN
Classifier: Environment :: Web Environment
Classifier: Intended Audience :: Developers
Classifier: Operating System :: OS Independent
Classifier: Programming Language :: Python
Classifier: Programming Language :: Python :: 2
Classifier: Programming Language :: Python :: 2.7
Classifier: Programming Language :: Python :: 3
Classifier: Programming Language :: Python :: 3.4
Classifier: Programming Language :: Python :: 3.5
Classifier: Framework :: Django
Classifier: License :: OSI Approved :: BSD License
