Use Rendition in image_to_html

CONTRIBUTORS.rst

@@ -272,6 +272,7 @@ Contributors
 * J Rob Gant
 * Mary Kate Fain
 * Dário Marcelino
+* Dave Bell
 
 Translators
 ===========

docs/releases/2.1.rst

@@ -23,3 +23,8 @@ Bug fixes
 
 Upgrade considerations
 ======================
+
+Image format ``image_to_html`` method has been updated
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+
+The internal API for rich text image format objects (see :ref:`rich_text_image_formats`) has been updated; the ``Format.image_to_html`` method now receives the ``extra_attributes`` keyword argument as a dictionary of attributes, rather than a string. If you have defined any custom format objects that override this method, these will need to be updated.

wagtail/images/formats.py

@@ -15,30 +15,31 @@ class Format:
 
     def editor_attributes(self, image, alt_text):
         """
-        Return string of additional attributes to go on the HTML element
+        Return additional attributes to go on the HTML element
         when outputting this image within a rich text editor field
         """
-        return 'data-embedtype="image" data-id="%d" data-format="%s" data-alt="%s" ' % (
-            image.id, self.name, escape(alt_text)
-        )
+        return {
+            'data-embedtype': "image",
+            'data-id': image.id,
+            'data-format': self.name,
+            'data-alt': escape(alt_text),
+        }
 
     def image_to_editor_html(self, image, alt_text):
         return self.image_to_html(
             image, alt_text, self.editor_attributes(image, alt_text)
         )
 
-    def image_to_html(self, image, alt_text, extra_attributes=''):
+    def image_to_html(self, image, alt_text, extra_attributes=None):
+        if extra_attributes is None:
+            extra_attributes = {}
         rendition = get_rendition_or_not_found(image, self.filter_spec)
 
+        extra_attributes['alt'] = escape(alt_text)
         if self.classnames:
-            class_attr = 'class="%s" ' % escape(self.classnames)
-        else:
-            class_attr = ''
+            extra_attributes['class'] = "%s" % escape(self.classnames)
 
-        return '<img %s%ssrc="%s" width="%d" height="%d" alt="%s">' % (
-            extra_attributes, class_attr,
-            escape(rendition.url), rendition.width, rendition.height, escape(alt_text)
-        )
+        return rendition.img_tag(extra_attributes)
 
 
 FORMATS = []

wagtail/images/tests/test_rich_text.py

@@ -2,11 +2,12 @@ from bs4 import BeautifulSoup
 from django.test import TestCase
 
 from wagtail.images.rich_text import ImageEmbedHandler, image_embedtype_handler
+from wagtail.tests.utils import WagtailTestUtils
 
 from .utils import Image, get_test_image_file
 
 
-class TestImageEmbedHandler(TestCase):
+class TestImageEmbedHandler(TestCase, WagtailTestUtils):
     def test_get_db_attributes(self):
         soup = BeautifulSoup(
             '<b data-id="test-id" data-format="test-format" data-alt="test-alt">foo</b>',
@@ -30,7 +31,7 @@ class TestImageEmbedHandler(TestCase):
              'alt': 'test-alt',
              'format': 'left'}
         )
-        self.assertIn('<img class="richtext-image left"', result)
+        self.assertTagInHTML('<img class="richtext-image left" />', result, allow_extra_attrs=True)
 
     def test_expand_db_attributes_escapes_alt_text(self):
         Image.objects.create(id=1, title='Test', file=get_test_image_file())
@@ -47,8 +48,7 @@ class TestImageEmbedHandler(TestCase):
             {'id': 1,
              'format': 'left'},
         )
-        self.assertIn('<img class="richtext-image left"', result)
-        self.assertIn('alt=""', result)
+        self.assertTagInHTML('<img class="richtext-image left" alt="" />', result, allow_extra_attrs=True)
 
     def test_expand_db_attributes_for_editor(self):
         Image.objects.create(id=1, title='Test', file=get_test_image_file())
@@ -57,10 +57,9 @@ class TestImageEmbedHandler(TestCase):
              'alt': 'test-alt',
              'format': 'left'},
         )
-        self.assertIn(
+        self.assertTagInHTML(
             '<img data-embedtype="image" data-id="1" data-format="left" '
-            'data-alt="test-alt" class="richtext-image left"', result
-        )
+            'data-alt="test-alt" class="richtext-image left" />', result, allow_extra_attrs=True)
 
     def test_expand_db_attributes_for_editor_escapes_alt_text(self):
         Image.objects.create(id=1, title='Test', file=get_test_image_file())
@@ -69,10 +68,11 @@ class TestImageEmbedHandler(TestCase):
              'alt': 'Arthur "two sheds" Jackson',
              'format': 'left'},
         )
-        self.assertIn(
+        self.assertTagInHTML(
             '<img data-embedtype="image" data-id="1" data-format="left" '
-            'data-alt="Arthur &quot;two sheds&quot; Jackson" class="richtext-image left"', result
-        )
+            'data-alt="Arthur &quot;two sheds&quot; Jackson" class="richtext-image left" />',
+            result, allow_extra_attrs=True)
+
         self.assertIn('alt="Arthur &quot;two sheds&quot; Jackson"', result)
 
     def test_expand_db_attributes_for_editor_with_missing_alt(self):
@@ -81,7 +81,6 @@ class TestImageEmbedHandler(TestCase):
             {'id': 1,
              'format': 'left'},
         )
-        self.assertIn(
-            '<img data-embedtype="image" data-id="1" data-format="left" '
-            'data-alt="" class="richtext-image left"', result
-        )
+        self.assertTagInHTML(
+            '<img data-embedtype="image" data-id="1" data-format="left" data-alt="" '
+            'class="richtext-image left" />', result, allow_extra_attrs=True)

wagtail/images/tests/tests.py

@@ -6,7 +6,6 @@ from django.conf import settings
 from django.core.exceptions import ImproperlyConfigured
 from django.test import TestCase, override_settings
 from django.urls import reverse
-from mock import MagicMock
 from taggit.forms import TagField, TagWidget
 
 from wagtail.images import get_image_model, get_image_model_string
@@ -176,18 +175,20 @@ class TestMissingImage(TestCase):
         )
 
 
-class TestFormat(TestCase):
+class TestFormat(TestCase, WagtailTestUtils):
     def setUp(self):
         # test format
         self.format = Format(
             'test name',
             'test label',
             'test classnames',
-            'test filter spec'
+            'original'
         )
         # test image
-        self.image = MagicMock()
-        self.image.id = 0
+        self.image = Image.objects.create(
+            title="Test image",
+            file=get_test_image_file(),
+        )
 
     def test_editor_attributes(self):
         result = self.format.editor_attributes(
@@ -195,45 +196,43 @@ class TestFormat(TestCase):
             'test alt text'
         )
         self.assertEqual(result,
-                         'data-embedtype="image" data-id="0" data-format="test name" data-alt="test alt text" ')
+                         {'data-alt': 'test alt text', 'data-embedtype': 'image',
+                          'data-format': 'test name', 'data-id': 1})
 
     def test_image_to_editor_html(self):
         result = self.format.image_to_editor_html(
             self.image,
             'test alt text'
         )
-        self.assertRegex(
-            result,
-            '<img data-embedtype="image" data-id="0" data-format="test name" '
-            'data-alt="test alt text" class="test classnames" src="[^"]+" width="1" height="1" alt="test alt text">',
-        )
+        self.assertTagInHTML(
+            '<img data-embedtype="image" data-id="1" data-format="test name" '
+            'data-alt="test alt text" class="test classnames" '
+            'width="640" height="480" alt="test alt text" >', result, allow_extra_attrs=True)
 
     def test_image_to_editor_html_with_quoting(self):
         result = self.format.image_to_editor_html(
             self.image,
             'Arthur "two sheds" Jackson'
         )
-        self.assertRegex(
-            result,
-            '<img data-embedtype="image" data-id="0" data-format="test name" '
-            'data-alt="Arthur &quot;two sheds&quot; Jackson" class="test classnames" src="[^"]+" width="1" height="1" alt="Arthur &quot;two sheds&quot; Jackson">',
-        )
+        self.assertTagInHTML(
+            '<img data-embedtype="image" data-id="1" data-format="test name" '
+            'data-alt="Arthur &quot;two sheds&quot; Jackson" class="test classnames" '
+            'width="640" height="480" alt="Arthur &quot;two sheds&quot; Jackson" >',
+            result, allow_extra_attrs=True)
+
 
     def test_image_to_html_no_classnames(self):
         self.format.classnames = None
         result = self.format.image_to_html(self.image, 'test alt text')
-        self.assertRegex(
-            result,
-            '<img src="[^"]+" width="1" height="1" alt="test alt text">'
-        )
+        self.assertTagInHTML(
+            '<img width="640" height="480" alt="test alt text">', result, allow_extra_attrs=True)
         self.format.classnames = 'test classnames'
 
     def test_image_to_html_with_quoting(self):
         result = self.format.image_to_html(self.image, 'Arthur "two sheds" Jackson')
-        self.assertRegex(
-            result,
-            '<img class="test classnames" src="[^"]+" width="1" height="1" alt="Arthur &quot;two sheds&quot; Jackson">'
-        )
+        self.assertTagInHTML(
+            '<img class="test classnames" width="640" height="480" '
+            'alt="Arthur &quot;two sheds&quot; Jackson">', result, allow_extra_attrs=True)
 
     def test_get_image_format(self):
         register_image_format(self.format)