Fix #176 -- Allow overriding the img-tag dimensions attributes (#177)

Co-authored-by: Johannes Maron <[email protected]>

Author: atnartur

pictures/templates/pictures/picture.html

@@ -2,5 +2,5 @@
   <source type="image/{{ type|lower }}"
           srcset="{% for width, pic in srcset.items %}{% if use_placeholders %}{% url 'pictures:placeholder' alt|urlencode:'' ratio width type %}{% else %}{{ pic.url }}{% endif %} {{ width }}w{% if not forloop.last %}, {% endif %}{% endfor %}"
           sizes="{{ media }}">{% endfor %}
-  <img src="{{ field_file.url }}" alt="{{ alt }}" width="{{ field_file.width }}" height="{{ field_file.height }}"{% include 'pictures/attrs.html' with attrs=img_attrs %}>
+  <img{% include 'pictures/attrs.html' with attrs=img_attrs %}>
 </picture>

pictures/templatetags/pictures.py

@@ -14,7 +14,12 @@ def picture(field_file, img_alt=None, ratio=None, container=None, **kwargs):
     tmpl = loader.get_template("pictures/picture.html")
     breakpoints = {}
     picture_attrs = {}
-    img_attrs = {}
+    img_attrs = {
+        "src": field_file.url,
+        "alt": img_alt,
+        "width": field_file.width,
+        "height": field_file.height,
+    }
     try:
         sources = field_file.aspect_ratios[ratio]
     except KeyError as e:

tests/test_templatetags.py

@@ -65,6 +65,14 @@ def test_picture__additional_attrs_img(image_upload_file):
     assert ' loading="lazy"' in html
 
 
+@pytest.mark.django_db
+def test_picture__additional_attrs_img_size(image_upload_file):
+    profile = Profile.objects.create(name="Spiderman", picture=image_upload_file)
+    html = picture(profile.picture, ratio="3/2", img_width=500, img_height=500)
+    assert ' width="500"' in html
+    assert ' height="500"' in html
+
+
 @pytest.mark.django_db
 def test_picture__additional_attrs_picture(image_upload_file):
     profile = Profile.objects.create(name="Spiderman", picture=image_upload_file)