Skip to content

Commit acb0a0d

Browse files
authored
Document img_url template tag (#59)
* Allow img_url tag to take width as string * Mention img_url template tag in README
1 parent 8eebd18 commit acb0a0d

File tree

3 files changed

+21
-2
lines changed

3 files changed

+21
-2
lines changed

README.md

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -108,6 +108,25 @@ if get_settings().USE_PLACEHOLDERS:
108108
]
109109
```
110110

111+
### Legacy use-cases (email)
112+
113+
Although the `picture`-tag is [adequate for most use-cases][caniuse-picture],
114+
some remain, where a single `img` tag is necessary. Notably in email, where
115+
[most clients do support WebP][caniemail-webp] but not [srcset][caniemail-srcset].
116+
The template tag `img_url` returns a single size image URL.
117+
In addition to the ratio you will need to define the `file_type`
118+
as well as the `width` (absolute width in pixels).
119+
120+
121+
```html
122+
{% load pictures %}
123+
<img src="{% img_url profile.picture ratio="3/2" file_type="webp" width=800 %}" alt="profile picture">
124+
```
125+
126+
[caniuse-picture]: https://caniuse.com/picture
127+
[caniemail-webp]: https://www.caniemail.com/features/image-webp/
128+
[caniemail-srcset]: https://www.caniemail.com/features/html-srcset/
129+
111130
## Config
112131

113132
### Aspect ratios

pictures/templatetags/pictures.py

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -59,6 +59,6 @@ def img_url(field_file, file_type, width, ratio=None) -> str:
5959
) from e
6060
for w, img in sorted(sizes.items()):
6161
url = img.url
62-
if w >= width:
62+
if w >= int(width):
6363
break
6464
return url

tests/test_templatetags.py

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -67,7 +67,7 @@ def test_picture__additional_attrs(image_upload_file):
6767
def test_img_url(image_upload_file):
6868
profile = Profile.objects.create(name="Spiderman", picture=image_upload_file)
6969
assert (
70-
img_url(profile.picture, ratio="3/2", file_type="webp", width=800)
70+
img_url(profile.picture, ratio="3/2", file_type="webp", width="800")
7171
== "/_pictures/image/3x2/800w.WEBP"
7272
)
7373

0 commit comments

Comments
 (0)