Merge branch 'jeffrey-hearn-imagetags-attrs-prop'

CHANGELOG.txt

@@ -12,6 +12,7 @@ Changelog
  * Added a new datetime picker widget
  * Added styleguide (mainly for wagtail developers)
  * Aesthetic improvements to preview experience
+ * Added an 'attrs' property to image rendition objects to output src, width, height and alt attributes all in one go
  * Fix: Animated GIFs are now coalesced before resizing
  * Fix: Wand backend clones images before modifying them
  * Fix: Admin breadcrumb now positioned correctly on mobile

docs/building_your_site/frontenddevelopers.rst

@@ -197,6 +197,11 @@ In some cases greater control over the ``img`` tag is required, for example to a
     <img src="{{ tmp_photo.src }}" width="{{ tmp_photo.width }}" 
         height="{{ tmp_photo.height }}" alt="{{ tmp_photo.alt }}" class="my-custom-class" />
 
+You can also use the ``attrs`` property as a shorthand to output the ``src``, ``width``, ``height`` and ``alt`` attributes in one go:
+
+.. code-block:: django
+
+    <img {{ tmp_photo.attrs }} class="my-custom-class" />
 
 .. _rich-text-filter:
 

wagtail/wagtailimages/models.py

@@ -236,11 +236,15 @@ class AbstractRendition(models.Model):
     def url(self):
         return self.file.url
 
-    def img_tag(self):
+    @property
+    def attrs(self):
         return mark_safe(
-            '<img src="%s" width="%d" height="%d" alt="%s">' % (escape(self.url), self.width, self.height, escape(self.image.title))
+            'src="%s" width="%d" height="%d" alt="%s"' % (escape(self.url), self.width, self.height, escape(self.image.title))
         )
 
+    def img_tag(self):
+        return mark_safe('<img %s>' % self.attrs)
+
     class Meta:
         abstract = True
 

wagtail/wagtailimages/tests.py

@@ -197,6 +197,18 @@ class TestImageTag(TestCase):
         self.assertTrue('height="300"' in result)
         self.assertTrue('alt="Test image"' in result)
 
+    def render_image_tag_as(self, image, filter_spec):
+        temp = template.Template('{% load image_tags %}{% image image_obj ' + filter_spec + ' as test_img %}<img {{ test_img.attrs }} />')
+        context = template.Context({'image_obj': image})
+        return temp.render(context)
+
+    def test_image_tag_attrs(self):
+        result = self.render_image_tag_as(self.image, 'width-400')
+
+        # Check that all the required HTML attributes are set
+        self.assertTrue('width="400"' in result)
+        self.assertTrue('height="300"' in result)
+        self.assertTrue('alt="Test image"' in result)
 
 ## ===== ADMIN VIEWS =====