Escape slashes used in placeholer alt text (#39)

* Add test for alt text containing slash character
* Encode alt text in placeholder URL

Alt texts main contain special chars that are not allowed within URLs.
We need to URL escape the alt text when passing it to the placeholder view.

Author: jnns

pictures/templates/pictures/picture.html

@@ -1,6 +1,6 @@
 <picture>{% for type, srcset in sources.items %}
   <source type="image/{{ type|lower }}"
-          srcset="{% for width, pic in srcset.items %}{% if use_placeholders %}{% url 'pictures:placeholder' alt ratio width type %}{% else %}{{ pic.url }}{% endif %} {{ width }}w{% if not forloop.last %}, {% endif %}{% endfor %}"
+          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' %}>
 </picture>

pictures/utils.py

@@ -3,6 +3,7 @@
 import sys
 from fractions import Fraction
 from functools import lru_cache
+from urllib.parse import unquote
 
 from PIL import Image, ImageDraw, ImageFont
 
@@ -81,7 +82,7 @@ def placeholder(width: int, height: int, alt):
     elif sys.platform == "darwin":
         font_name = "Helvetica"
     font = ImageFont.truetype(font_name, fontsize)
-    text = f"{alt}\n<{width}x{height}>"
+    text = unquote(f"{alt}\n<{width}x{height}>")
     while font.getsize(text)[0] < width / 2:
         # iterate until the text size is just larger than the criteria
         fontsize += 1

tests/test_templatetags.py

@@ -40,6 +40,14 @@ def test_picture__placeholder(client, image_upload_file, settings):
     assert picture_with_placeholders_html in response.content
 
 
+@pytest.mark.django_db
+def test_picture__placeholder_with_alt(client, image_upload_file, settings):
+    settings.PICTURES["USE_PLACEHOLDERS"] = True
+    profile = Profile.objects.create(name="Spiderman", picture=image_upload_file)
+    html = picture(profile.picture, alt="Event 2022/2023", ratio="3/2", loading="lazy")
+    assert "/_pictures/Event%25202022%252F2023/3x2/800w.WEBP" in html
+
+
 @pytest.mark.django_db
 def test_picture__invalid_ratio(image_upload_file):
     profile = Profile.objects.create(name="Spiderman", picture=image_upload_file)