Django响应式图像库django-pictures

什么是响应式图像？

响应式设计是指网页在不同尺寸的设备上都有良好的显示效果。响应式设计的网页图像，就是响应式图像。

django-pictures是使用现代代码（如 AVIF 和 WebP）的响应式跨浏览器图像库。

特点

• 使用 Picture 标签的响应式 Web 图像

• 原生电网系统支持

• 提供带或不带 CDN 的文件

• 地方发展的占位符

• 迁移支持

• Celery、Dramatiq 或 Django RQ 的异步图像处理

• DRF 支持

安装

python3 -m pip install django-pictures

settings.py添加设置

INSTALLED_APPS = [
    # ...
    '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],
    "USE_PLACEHOLDERS": True,
    "QUEUE_NAME": "pictures",
    "PROCESSOR": "pictures.tasks.process_picture",

}

如果安装了Dramatiq或Celery，将默认为异步图像处理。

占位符

该库带有动态创建的占位符，以简化本地PICTURES["USE_PLACEHOLDERS"]发展。若要启用它们，请添加以下内容以启用该设置并添加以下 URL 配置：

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

urlpatterns = [
    # ...
]

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

配置

纵横比：指定图像的纵横比，图像将被裁剪到指定的纵横比。纵横比指定为带斜杠的字符串在宽度和高度之间。例如16/9，将图像裁剪为16：9。

# 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",
      aspect_ratios=[None, "1/1", "3/2", "16/9"],
    

# template.html
{% load pictures %}
{% picture profile.picture img_alt="Spiderman" ratio="16/9" m=6 l=4 %}

如果未在模板中指定纵横比或“无”，则图像将以文件的原始纵横比提供。

只能在模板中使用已在模型上定义的纵横比。 如果提供了其他值，则模型将默认为aspect_ratios[None]。

断点：可以定义自己的断点，它们应该与您的CSS库中使用的断点相同。只需覆盖PICTURES["BREAKPOINTS"]设置即可。

网格列：网格在网页设计中非常普遍，以至于它们甚至进入了CSS。默认为 12 列，可以通过设置PICTURES["GRID_COLUMNS"]覆盖此设置。

容器宽度：容器通常用于限制布局的最大宽度， 在更大的屏幕上提高可读性。默认为1200px，可以通过PICTURES["CONTAINER_WIDTH"]设置覆盖此设置。如果不使用容器，也可以将其设置为None。

像素密度：默认1x和2x像素密度服务。

与Django Rest框架（DRF)对接

django-pictures提供了一个只读PictureField，可用于包含所有 DRF 序列化程序中可用的图片大小。

from rest_framework import serializers
from pictures.contrib.rest_framework import PictureField

class PictureSerializer(serializers.Serializer):
    picture = PictureField()

响应可以限制为单个纵横比和图像源，如下所示，向字段提供aspect_ratio和image_source参数。

from rest_framework import serializers
from pictures.contrib.rest_framework import PictureField

class PictureSerializer(serializers.Serializer):
    picture = PictureField(aspect_ratio="16/9", image_source="WEBP")

还可以向序列化程序提供可选的GET参数， 以指定要包含在响应中的纵横比和断点。参数以fieldname_为前缀，以避免与其他字段冲突。

curl http://localhost:8000/api/path/?picture_ratio=16%2F9&picture_m=6&picture_l=4
# %2F is the url encoded slash

访问结果：

{
  "other_fields": "…",
  "picture": {
    "url": "/path/to/image.jpg",
    "width": 800,
    "height": 800,
    "ratios": {
      "1/1": {
        "sources": {
          "image/webp": {
            "100": "/path/to/image/1/100w.webp",
            "200": "…"
          }
        },
        "media": "(min-width: 0px) and (max-width: 991px) 100vw, (min-width: 992px) and (max-width: 1199px) 33vw, 25vw"
      }
    }
  }
}

注意：仅当指定了断点时，才会包含键media。

github：https://github.com/codingjoe/django-pictures