This release is a pre-release and may not be stable for production use.
django-pictures
Responsive cross-browser image library using modern codes like AVIF & WebP.
Usage
# models.py
from django.db import models
from pictures.models import PictureField
class Profile(models.Model):
title = models.CharField(max_length=255)
picture = PictureField(upload_to='avatars')
<!-- template.html -->
{% load pictures %}
{% picture profile.picture alt="Spiderman" m=6 l=4 %}
The template above will render into:
<picture>
<source type="image/webp"
srcset="/media/testapp/profile/image/800w.webp 800w, /media/testapp/profile/image/100w.webp 100w, /media/testapp/profile/image/200w.webp 200w, /media/testapp/profile/image/300w.webp 300w, /media/testapp/profile/image/400w.webp 400w, /media/testapp/profile/image/500w.webp 500w, /media/testapp/profile/image/600w.webp 600w, /media/testapp/profile/image/700w.webp 700w"
sizes="(min-width: 0px) and (max-width: 991px) 100vw, (min-width: 992px) and (max-width: 1199px) 33vw, 600px">
<img src="/media/testapp/profile/image.jpg" alt="Spiderman" width="800" height="800">
</picture>
Setup
python3 -m pip install django-pictures
# settings.py
INSTALLED_APPS = [
# ...
'django_pictures',
]
# the following are defaults, but you can override them
PICTURES = {
"BREAKPOINTS": {
"xs": 576,
"s": 768,
"m": 992,
"l": 1200,
"xl": 1400,
},
"GRID_COLUMNS": 12,
"CONTAINER_WIDTH": 1200,
"FILE_TYPES": ["WEBP"],
"PIXEL_DENSITIES": [1, 2],
}
Config
Breakpoints
You may define your own breakpoints, they should be identical to the ones used
in your css library. Simply override the PICTURES["BREAKPOINTS"] setting.
Grid columns
Grids are so common in web design, that they even made it into CSS.
We default to 12 columns, but you can override this setting, via the
PICTURES["GRID_COLUMNS"] setting.
Container width
Containers are commonly used to limit the maximum width of layouts,
to promote better readability on larger screens. We default to 1200px,
but you can override this setting, via the PICTURES["CONTAINER_WIDTH"] setting.
You may also set it to None, should you not use a container.
File types
Unless you still services IE11 clients, you should be fine serving just WebP. Sadly, AVIF (WebP's successor) is not yet supported by Pillow.
Pixel densities
Unless you really care that your images hold of if you hold your UHD phone very
close to your eyeballs, you should be fine, serving at the default 1x and 2x
densities.
1 maintainer
Download files
Download the file for your platform. If you're not sure which to choose, learn more about installing packages.
Source Distribution
Built Distribution
Filter files by name, interpreter, ABI, and platform.
If you're not sure about the file name format, learn more about wheel file names.
Copy a direct link to the current filters
File details
Details for the file django-pictures-1.0a1.tar.gz.
File metadata
- Download URL: django-pictures-1.0a1.tar.gz
- Upload date:
- Size: 9.2 kB
- Tags: Source
- Uploaded using Trusted Publishing? No
- Uploaded via:
twine/3.8.0 pkginfo/1.8.2 readme-renderer/34.0 requests/2.27.1 requests-toolbelt/0.9.1 urllib3/1.26.9 tqdm/4.63.1 importlib-metadata/4.11.3 keyring/23.5.0 rfc3986/2.0.0 colorama/0.4.4 CPython/3.10.0
File hashes
| Algorithm | Hash digest | |
|---|---|---|
| SHA256 |
39def84e2114b8c522a4f715ef690e95e0d9260cde35a510b15c9b15d0e49489
|
|
| MD5 |
8ee281eeb566cb5b2a5335665a32310c
|
|
| BLAKE2b-256 |
6a497ea6074860f6007b7c2e792451d52d72d4422bbefe10e51aef457dc8cad9
|
File details
Details for the file django_pictures-1.0a1-py3-none-any.whl.
File metadata
- Download URL: django_pictures-1.0a1-py3-none-any.whl
- Upload date:
- Size: 10.3 kB
- Tags: Python 3
- Uploaded using Trusted Publishing? No
- Uploaded via:
twine/3.8.0 pkginfo/1.8.2 readme-renderer/34.0 requests/2.27.1 requests-toolbelt/0.9.1 urllib3/1.26.9 tqdm/4.63.1 importlib-metadata/4.11.3 keyring/23.5.0 rfc3986/2.0.0 colorama/0.4.4 CPython/3.10.0
File hashes
| Algorithm | Hash digest | |
|---|---|---|
| SHA256 |
d4e2f9fa0d44424a97d65707ec3d71ac630a005406c52e23be3caa20fabedd94
|
|
| MD5 |
c1407cfa2fd8cf2e542b442c03f0b6b7
|
|
| BLAKE2b-256 |
f074bb544480d25c9bdcd023bac9fa692d2f80a248e44ca62885dc6c1d5941e6
|
