Image chooser diff

wagtail/wagtailadmin/templates/wagtailadmin/pages/revisions/compare.html

@@ -40,6 +40,18 @@
             background-color: rgb(248, 203, 203);
             text-decoration: line-through;
         }
+
+        .comparison .preview-image {
+            display: inline-block;
+        }
+
+        .comparison .preview-image.addition {
+            border: 2px solid rgb(166, 243, 166);
+        }
+
+        .comparison .preview-image.deletion {
+            border: 2px solid rgb(248, 203, 203);
+        }
     </style>
 {% endblock %}
 

wagtail/wagtailimages/edit_handlers.py

@@ -1,6 +1,10 @@
 from __future__ import absolute_import, unicode_literals
 
+from django.template.loader import render_to_string
+
+from wagtail.wagtailadmin.compare import FieldComparison
 from wagtail.wagtailadmin.edit_handlers import BaseChooserPanel
+from wagtail.wagtailimages.models import get_image_model
 
 from .widgets import AdminImageChooser
 
@@ -12,6 +16,10 @@ class BaseImageChooserPanel(BaseChooserPanel):
     def widget_overrides(cls):
         return {cls.field_name: AdminImageChooser}
 
+    @classmethod
+    def get_comparison_class(cls):
+        return ImageFieldComparison
+
 
 class ImageChooserPanel(object):
     def __init__(self, field_name):
@@ -22,3 +30,13 @@ class ImageChooserPanel(object):
             'model': model,
             'field_name': self.field_name,
         })
+
+
+class ImageFieldComparison(FieldComparison):
+    def htmldiff(self):
+        model = get_image_model()
+
+        return render_to_string("wagtailimages/widgets/compare.html", {
+            'image_a': model.objects.filter(id=self.val_a).first(),
+            'image_b': model.objects.filter(id=self.val_b).first(),
+        })

wagtail/wagtailimages/templates/wagtailimages/widgets/compare.html

@@ -0,0 +1,38 @@
+{% load wagtailimages_tags %}
+
+{% if image_a != image_b %}
+    {% if image_a and image_b %}
+        {# Image has changed #}
+
+        <div class="preview-image deletion">
+            {% image image_a max-165x165 class="show-transparency" %}
+        </div>
+
+        <div class="preview-image addition">
+            {% image image_b max-165x165 class="show-transparency" %}
+        </div>
+
+    {% elif image_b %}
+        {# Image has been added}
+
+        <div class="preview-image addition">
+            {% image image_b max-165x165 class="show-transparency" %}
+        </div>
+
+    {% elif image_a %}
+        {# Image has been removed #}
+
+        <div class="preview-image deletion">
+            {% image image_a max-165x165 class="show-transparency" %}
+        </div>
+
+    {% endif %}
+{% else %}
+    <div class="preview-image">
+        {% if image_a %}
+            {% image image_a max-165x165 class="show-transparency" %}
+        {% else %}
+            <img>
+        {% endif %}
+    </div>
+{% endif %}