django-pictures

Responsive cross-browser image library using modern codes like AVIF & WebP.

responsive web images using the picture tag
native grid system support
serve files with our without a CDN
placeholders for local development
migration support
async image processing for Celery or Dramatiq

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],
}

Placeholders

This library comes with dynamically created placeholders to simplify local development. To enable them, add the following to enable the PICTURES["USE_PLACEHOLDERS"] setting and add the following URL configuration:

# urls.py
from django.conf.urls import include, path
from pictures.conf import get_settings

urlpatterns = [
    # ...
]

if get_settings().USE_PLACEHOLDERS:
    urlpatterns += [
        path("_pictures/", include("pictures.urls")),
    ]

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.

Migrations

Django doesn't support file field migrations, but we do. You can simply auto create the migration and replace Django's AlterField operation with AlterPictureField. That's it.

You can follow the example in our test app, to see how it works.

Download files

Download the file for your platform. If you're not sure which to choose, learn more about installing packages.

Source Distribution

django-pictures-1.0a2.tar.gz (11.6 kB view details)

Uploaded Apr 9, 2022 Source

Built Distribution

If you're not sure about the file name format, learn more about wheel file names.

The dropdown lists show the available interpreters, ABIs, and platforms. Enable javascript to be able to filter the list of wheel files.

django_pictures-1.0a2-py3-none-any.whl (13.0 kB view details)

Uploaded Apr 9, 2022 Python 3

File details

Details for the file django-pictures-1.0a2.tar.gz.

File metadata

Download URL: django-pictures-1.0a2.tar.gz
Upload date: Apr 9, 2022
Size: 11.6 kB
Tags: Source
Uploaded using Trusted Publishing? No
Uploaded via: twine/4.0.0 CPython/3.10.4

File hashes

Hashes for django-pictures-1.0a2.tar.gz
Algorithm	Hash digest
SHA256	`6e4f1a36cd9c0b0b0dd3830f044bcf5643dcdc8487851edc69bcfaed77f6167f`
MD5	`50fc93079b660f19020bcbabfcf62806`
BLAKE2b-256	`a7e0047b699965f417bc31e34ca14a5b4866e34c7f2be28cc9fb255fa4b121bb`

See more details on using hashes here.

File details

Details for the file django_pictures-1.0a2-py3-none-any.whl.

File metadata

Download URL: django_pictures-1.0a2-py3-none-any.whl
Upload date: Apr 9, 2022
Size: 13.0 kB
Tags: Python 3
Uploaded using Trusted Publishing? No
Uploaded via: twine/4.0.0 CPython/3.10.4

File hashes

Hashes for django_pictures-1.0a2-py3-none-any.whl
Algorithm	Hash digest
SHA256	`92a0ce79043f3b4b84028371b625f910c73d1fff58d1b3cc8c871a6a6a9b32f5`
MD5	`061ea193034768c880d03691586651eb`
BLAKE2b-256	`81313ab311bfe4e6468d3138aebc608f033913760a52e5a1233bbb88b4ebc68e`