mindkomm/timmy

Timber 的高级图像处理


README

Timmy 是一个可选库/插件,用于使处理响应式图像更加方便。它设计用于与 Timber 一起使用,但应该适用于所有您的 WordPress 项目。

在您的 Twig 模板中,您可以这样做

<img{{ post.thumbnail|get_timber_image_responsive('custom-6') }}>

以获得这个

<img srcset="https://www.example.org/wp-content/uploads/2016/02/header_example-480x206-c-default.jpg 480w,
    https://www.example.org/wp-content/uploads/2016/02/header_example-768x329-c-default.jpg 768w,
    https://www.example.org/wp-content/uploads/2016/02/header_example-1400x600-c-default.jpg 1400w,
    https://www.example.org/wp-content/uploads/2016/02/header_example-2800x1200-c-default.jpg 2800w"
src="data:image/gif;base64,R0lGODlhAQABAAAAADs="
sizes="100vw"
alt="Your alt text"
>

文档

功能

Timber 已经内置了一组非常棒的图像处理功能。特别是 任意图像缩放 非常方便。每当访问页面且找不到图像大小时,它会即时创建。您可以使用任何数量的不同图像大小,而无需在更改默认 WordPress 图像大小时总是使用 Regenerate Thumbnails 等插件。

Timmy 使用 Timber 的 ImageHelper 类进一步增强此功能。

模仿默认 WordPress 图像功能

  • 您可以定义尽可能多的图像大小。使用命名图像大小(如 thumbnailmediumportrait 等)更容易。Timmy 允许您使用许多 便捷配置选项 定义每个图像大小。

  • 用户可以在 WYSYWIG 编辑器中选择不同的图像大小。通常,用户只能选择默认的 WordPress 大小 缩略图中等全尺寸。通过 Timmy 定义的图像,用户可以 选择您定义的所有图像大小,而无需默认大小。

  • 使通过 WordPress 编辑器插入到帖子内容中的图像具有响应式.

  • 与流行的插件集成,如 Advanced Custom FieldsAdmin ColumnsYoast SEO。因为 Timmy 告诉 WordPress 已存在图像大小,其他插件将允许您选择通过 Timmy 定义的图像,如 ACF 定义的图像字段预览图像或 Admin Columns 中使用的预览图像。

  • 您仍然可以使用 Regenerate Thumbnails。使用 Timmy 与 Regenerate Thumbnails 将从您不再需要的图像大小中清理上传文件夹。如果您没有使用 Timmy 定义图像大小,Timmy 将删除所有通过 Timmy 生成的图像大小。但请放心,记住 Timber 会在不存在的情况下自动创建图像大小。

  • 您仍然可以使用Timber的调整大小功能。Timber提供一些非常实用的图像处理功能。您可以使用这些功能,也可以将它们混合使用。

帮助您处理图像HTML输出

  • 响应式图像。对于每个图像尺寸,您可以定义额外的尺寸,这些尺寸将用于响应式图像的srcset。
  • 懒加载标记。为您的图像添加懒加载标记。
  • 无障碍性。Timmy会自动提取图像alt文本并将它们添加到您的图像中。

合理的图像生成

  • 图像尺寸在上传时生成。当您使用Timber图像时,不需要担心上传文件夹中是否存在图像尺寸。如果前端被访问,Timber会在图像尺寸不存在时创建它们。您始终需要访问前端以确保页面的第一个访问者不会遇到非常长的加载时间。因为Timmy知道您想要使用哪些尺寸——您已经定义了它们——它会为您生成它们。有些情况下这很有用,例如,当一些帖子自动创建时,您也拉入图像。

  • 限制到特定帖子类型以防止膨胀。如果您只想为某个帖子类型使用图像尺寸,您可以定义它。这将防止在网站上从未使用的图像尺寸膨胀您的上传文件夹。

局限性

  • 我们不知道Timmy是否与托管在内容分发网络(CDN)上的图像兼容。我们还没有调查这个问题,也不知道我们是否会调查。欢迎提交拉取请求 ;)。