Django响应式图像库django-pictures

2024-01-2610:11:48后端程序开发Comments291 views字数 2626阅读模式

什么是响应式图像?文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/58676.html

响应式设计是指网页在不同尺寸的设备上都有良好的显示效果。响应式设计的网页图像,就是响应式图像。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/58676.html

Django响应式图像库django-pictures文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/58676.html

django-pictures是使用现代代码(如 AVIF 和 WebP)的响应式跨浏览器图像库。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/58676.html

特点文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/58676.html

  • 使用 Picture 标签的响应式 Web 图像
  • 原生电网系统支持
  • 提供带或不带 CDN 的文件
  • 地方发展的占位符
  • 迁移支持
  • Celery、Dramatiq 或 Django RQ 的异步图像处理
  • DRF 支持

安装文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/58676.html

python3 -m pip install django-pictures

settings.py添加设置文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/58676.html

INSTALLED_APPS = [    # ...    'pictures',]
# the following are defaults, but you can override themPICTURES = {    "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,将默认为异步图像处理。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/58676.html

占位符文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/58676.html

该库带有动态创建的占位符,以简化本地PICTURES["USE_PLACEHOLDERS"]发展。若要启用它们,请添加以下内容以启用该设置并添加以下 URL 配置:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/58676.html

# urls.pyfrom django.urls import include, pathfrom pictures.conf import get_settings
urlpatterns = [    # ...]
if get_settings().USE_PLACEHOLDERS:    urlpatterns += [        path("_pictures/", include("pictures.urls")),    ]

配置文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/58676.html

纵横比:指定图像的纵横比,图像将被裁剪到指定的纵横比。纵横比指定为带斜杠的字符串在宽度和高度之间。例如16/9,将图像裁剪为16:9。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/58676.html

# models.pyfrom django.db import modelsfrom 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 %}

如果未在模板中指定纵横比或“无”,则图像将以文件的原始纵横比提供。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/58676.html

只能在模板中使用已在模型上定义的纵横比。 如果提供了其他值,则模型将默认为aspect_ratios[None]。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/58676.html

断点:可以定义自己的断点,它们应该与您的CSS库中使用的断点相同。只需覆盖PICTURES["BREAKPOINTS"]设置即可。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/58676.html

网格列:网格在网页设计中非常普遍,以至于它们甚至进入了CSS。默认为 12 列,可以通过设置PICTURES["GRID_COLUMNS"]覆盖此设置。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/58676.html

容器宽度:容器通常用于限制布局的最大宽度, 在更大的屏幕上提高可读性。默认为1200px,可以通过PICTURES["CONTAINER_WIDTH"]设置覆盖此设置。如果不使用容器,也可以将其设置为None。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/58676.html

像素密度:默认1x和2x像素密度服务。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/58676.html

与Django Rest框架(DRF)对接文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/58676.html

django-pictures提供了一个只读PictureField,可用于包含所有 DRF 序列化程序中可用的图片大小。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/58676.html

from rest_framework import serializersfrom pictures.contrib.rest_framework import PictureField
class PictureSerializer(serializers.Serializer):    picture = PictureField()

响应可以限制为单个纵横比和图像源,如下所示,向字段提供aspect_ratio和image_source参数。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/58676.html

from rest_framework import serializersfrom pictures.contrib.rest_framework import PictureField
class PictureSerializer(serializers.Serializer):    picture = PictureField(aspect_ratio="16/9", image_source="WEBP")

还可以向序列化程序提供可选的GET参数, 以指定要包含在响应中的纵横比和断点。参数以fieldname_为前缀,以避免与其他字段冲突。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/58676.html

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

访问结果:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/58676.html

{  "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。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/58676.html

github:https://github.com/codingjoe/django-pictures
文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/58676.html
  • 本站内容整理自互联网,仅提供信息存储空间服务,以方便学习之用。如对文章、图片、字体等版权有疑问,请在下方留言,管理员看到后,将第一时间进行处理。
  • 转载请务必保留本文链接:https://www.cainiaoxueyuan.com/bc/58676.html

Comment

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定