Skip to content

Commit

Permalink
Document img_url template tag (#59)
Browse files Browse the repository at this point in the history
* Allow img_url tag to take width as string
* Mention img_url template tag in README
  • Loading branch information
jnns authored Oct 25, 2022
1 parent 8eebd18 commit acb0a0d
Show file tree
Hide file tree
Showing 3 changed files with 21 additions and 2 deletions.
19 changes: 19 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -108,6 +108,25 @@ if get_settings().USE_PLACEHOLDERS:
]
```

### Legacy use-cases (email)

Although the `picture`-tag is [adequate for most use-cases][caniuse-picture],
some remain, where a single `img` tag is necessary. Notably in email, where
[most clients do support WebP][caniemail-webp] but not [srcset][caniemail-srcset].
The template tag `img_url` returns a single size image URL.
In addition to the ratio you will need to define the `file_type`
as well as the `width` (absolute width in pixels).


```html
{% load pictures %}
<img src="{% img_url profile.picture ratio="3/2" file_type="webp" width=800 %}" alt="profile picture">
```

[caniuse-picture]: https://caniuse.com/picture
[caniemail-webp]: https://www.caniemail.com/features/image-webp/
[caniemail-srcset]: https://www.caniemail.com/features/html-srcset/

## Config

### Aspect ratios
Expand Down
2 changes: 1 addition & 1 deletion pictures/templatetags/pictures.py
Original file line number Diff line number Diff line change
Expand Up @@ -59,6 +59,6 @@ def img_url(field_file, file_type, width, ratio=None) -> str:
) from e
for w, img in sorted(sizes.items()):
url = img.url
if w >= width:
if w >= int(width):
break
return url
2 changes: 1 addition & 1 deletion tests/test_templatetags.py
Original file line number Diff line number Diff line change
Expand Up @@ -67,7 +67,7 @@ def test_picture__additional_attrs(image_upload_file):
def test_img_url(image_upload_file):
profile = Profile.objects.create(name="Spiderman", picture=image_upload_file)
assert (
img_url(profile.picture, ratio="3/2", file_type="webp", width=800)
img_url(profile.picture, ratio="3/2", file_type="webp", width="800")
== "/_pictures/image/3x2/800w.WEBP"
)

Expand Down

0 comments on commit acb0a0d

Please sign in to comment.