Responsive cross-browser image library using modern codes like AVIF & WebP.
Project description
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.
Project details
Release history Release notifications | RSS feed
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
Hashes for django_pictures-1.0a1-py3-none-any.whl
Algorithm | Hash digest | |
---|---|---|
SHA256 | d4e2f9fa0d44424a97d65707ec3d71ac630a005406c52e23be3caa20fabedd94 |
|
MD5 | c1407cfa2fd8cf2e542b442c03f0b6b7 |
|
BLAKE2b-256 | f074bb544480d25c9bdcd023bac9fa692d2f80a248e44ca62885dc6c1d5941e6 |