Allow overriding attributes in {% image %} tag

The `alt` attribute that was automatically generated as part of the
`{% image %}` tag could not be overridden. If template authors passed
their own `alt="..."` attribute in, two would be printed out instead
of the default one being overridden.

The relevant code has been refactored to build a dict of attributes,
allowing the default set to be overridden, and then printing them using
`flatatt`.

Fixes #1933

CHANGELOG.txt

@@ -6,7 +6,8 @@ Changelog
 
  * Added `WAGTAIL_PASSWORD_RESET_ENABLED` setting to allow password resets to be disabled independently of the password management interface (John Draper)
  * Updated fonts for more comprehensive Unicode support
- * Added ``.alt`` attribute to image renditions
+ * Added `.alt` attribute to image renditions
+ * The default `src`, `width`, `height` and `alt` attributes can now be overridden by attributes passed to the `{% image %}` tag
  * Fix: HTTP cache purge now works again on Python 2 (Mitchel Cabuloy)
 
 1.2 (12.11.2015)

docs/releases/1.3.rst

@@ -17,6 +17,7 @@ Minor features
  * Added ``WAGTAIL_PASSWORD_RESET_ENABLED`` setting to allow password resets to be disabled independently of the password management interface (John Draper)
  * Updated fonts for more comprehensive Unicode support
  * Added ``.alt`` attribute to image renditions
+ * The default ``src``, ``width``, ``height`` and ``alt`` attributes can now be overridden by attributes passed to the ``{% image %}`` tag
 
 
 Bug fixes

docs/topics/images/using_in_templates.rst

@@ -134,8 +134,7 @@ Extra attributes can be specified with the syntax ``attribute="value"``:
 
     {% image page.photo width-400 class="foo" id="bar" %}
 
-No validation is performed on attributes added in this way so it's possible to add `src`, `width`, `height` and `alt` of your own that might conflict with those generated by the tag itself.
-
+You can set a more relevant `alt` attribute this way, overriding the one automatically generated from the title of the image. The `src`, `width`, and `height` attributes can also be overridden, if necessary.
 
 **2. Generating the image "as foo" to access individual properties**
 

wagtail/wagtailimages/models.py

@@ -3,6 +3,7 @@ from __future__ import unicode_literals
 import os.path
 import hashlib
 from contextlib import contextmanager
+from collections import OrderedDict
 
 
 from taggit.managers import TaggableManager
@@ -15,7 +16,7 @@ from django.db.models.signals import pre_delete, pre_save
 from django.dispatch.dispatcher import receiver
 from django.utils.safestring import mark_safe
 from django.utils.six import BytesIO, text_type
-from django.utils.html import escape, format_html_join
+from django.forms.widgets import flatatt
 from django.conf import settings
 from django.utils.translation import ugettext_lazy as _
 from django.utils.encoding import python_2_unicode_compatible
@@ -445,16 +446,28 @@ class AbstractRendition(models.Model):
 
     @property
     def attrs(self):
-        return mark_safe(
-            'src="%s" width="%d" height="%d" alt="%s"' % (escape(self.url), self.width, self.height, escape(self.alt))
-        )
+        """
+        The src, width, height, and alt attributes for an <img> tag, as a HTML
+        string
+        """
+        return flatatt(self.attrs_dict)
 
-    def img_tag(self, extra_attributes=None):
-        if extra_attributes:
-            extra_attributes_string = format_html_join(' ', '{0}="{1}"', extra_attributes.items())
-            return mark_safe('<img %s %s>' % (self.attrs, extra_attributes_string))
-        else:
-            return mark_safe('<img %s>' % self.attrs)
+    @property
+    def attrs_dict(self):
+        """
+        A dict of the src, width, height, and alt attributes for an <img> tag.
+        """
+        return OrderedDict([
+            ('src', self.url),
+            ('width', self.width),
+            ('height', self.height),
+            ('alt', self.alt),
+        ])
+
+    def img_tag(self, extra_attributes={}):
+        attrs = self.attrs_dict.copy()
+        attrs.update(extra_attributes)
+        return mark_safe('<img{}>'.format(flatatt(attrs)))
 
     def __html__(self):
         return self.img_tag()

wagtail/wagtailimages/tests/test_jinja2.py

@@ -55,8 +55,8 @@ class TestImagesJinja(TestCase):
 
     def test_image_attributes(self):
         self.assertHTMLEqual(
-            self.render('{{ image(myimage, "width-200", class="test") }}', {'myimage': self.image}),
-            '<img alt="Test image" src="{}" width="200" height="150" class="test">'.format(
+            self.render('{{ image(myimage, "width-200", alt="alternate", class="test") }}', {'myimage': self.image}),
+            '<img alt="alternate" src="{}" width="200" height="150" class="test">'.format(
                 self.get_image_filename(self.image, "width-200")))
 
     def test_image_assignment(self):

wagtail/wagtailimages/tests/tests.py

@@ -58,7 +58,7 @@ class TestImageTag(TestCase):
         self.assertTrue('alt="Test image"' in result)
 
     def render_image_tag_with_extra_attributes(self, image, title):
-        temp = template.Template('{% load wagtailimages_tags %}{% image image_obj width-400 class="photo" title=title|lower %}')
+        temp = template.Template('{% load wagtailimages_tags %}{% image image_obj width-400 class="photo" title=title|lower alt="Alternate" %}')
         context = template.Context({'image_obj': image, 'title': title})
         return temp.render(context)
 
@@ -69,6 +69,7 @@ class TestImageTag(TestCase):
         self.assertTrue('width="400"' in result)
         self.assertTrue('height="300"' in result)
         self.assertTrue('class="photo"' in result)
+        self.assertTrue('alt="Alternate"' in result)
         self.assertTrue('title="my wonderful title"' in result)
 
     def render_image_tag_with_filters(self, image):