README

这是一个库，可以使您在响应式Wordpress模板中处理图片变得轻而易举。

包含内容

为WP媒体库中的图片生成具有精确的 srcset 和 sizes 属性的 <img> 标签。
为WP媒体图片和主题图片生成包含长宽比保持包装器的 <img> 标签。非常适合防止懒加载图片时的CLS。
干净API，以移动优先（min-width）或桌面优先（max-width）的方式定义响应式图片大小。
辅助工具，根据每个断点的Bootstrap网格中的占用列定义图片大小。
替换Gutenberg图片块中的响应式图片。
生成经过清理和最小化的 <svg> 代码，可以安全地内联到HTML中。

代码

<?php
$sizes = img_sizes([
	0 => [400, 250], // 400x250px cropped image for viewport 0 - 575px
	576 => 500, // 500px wide, proportional height image for viewpoer 576 - 767px
	768 => 700, // ...
	992 => 900,
	1200 => 1100
]);
img_upload($attachment_id)->responsiveImgTag($sizes, ['class' => 'img-fluid', 'alt' => 'My image']);

输出

<img
	src="https://res.cloudinary.com/your-name/q_auto:eco,f_auto,w_1100,c_fit/your-project/2021/05/your-image.jpg"
	sizes="(min-width: 1200px) 1100px,
		(min-width: 992px) 900px,
		(min-width: 768px) 700px,
		(min-width: 576px) 500px,
		400px"
	srcset="https://res.cloudinary.com/your-name/q_auto:eco,f_auto,w_1100,c_fit/your-project/2021/05/your-image.jpg 1100w,
		https://res.cloudinary.com/your-name/q_auto:eco,f_auto,w_900,c_fit/your-project/2021/05/your-image.jpg 900w,
		https://res.cloudinary.com/your-name/q_auto:eco,f_auto,w_700,c_fit/your-project/2021/05/your-image.jpg 700w,
		https://res.cloudinary.com/your-name/q_auto:eco,f_auto,w_500,c_fit/your-project/2021/05/your-image.jpg 500w,
		https://res.cloudinary.com/your-name/q_auto:eco,f_auto,w_400,h_250,c_fill/your-project/2021/05/your-image.jpg 400w"
	width="1100" height="619"
	alt="My image"
	class="img-fluid">

非常感谢 Adam Laita 和他的文章（仅提供捷克语）关于图片优化。这是这个库最初的灵感来源。

安装

选项1：使用Composer

推荐使用Composer安装库

composer require fronty/responsive-images

在 functions.php 中包含Composer的自动加载

// functions.php
require_once(__DIR__ . '/vendor/autoload.php');

选项2：不使用Composer

下载库的源代码并将其解压到您的主题目录中。
在 functions.php 中手动要求文件

// functions.php

require_once(__DIR__ . '/responsive-images-master/src/Sizes/ImageSize.php');
require_once(__DIR__ . '/responsive-images-master/src/Sizes/ImageSizeList.php');
require_once(__DIR__ . '/responsive-images-master/src/Sizes/BootstrapSizes.php'); // Required only if you use Bootstrap

require_once(__DIR__ . '/responsive-images-master/src/BaseImage.php');
require_once(__DIR__ . '/responsive-images-master/src/UploadImage.php');
require_once(__DIR__ . '/responsive-images-master/src/ThemeImage.php');

WP插件

安装并激活 Fly Dynamic Image Resizer 插件，在本地开发版本中使用它。您也可以在生产环境中使用它，但会错过CDN的速度。
在生产版本中安装、激活并配置 Auto Cloudinary，它会自动使用其fetch API将所有图片上传到 Cloudinary。

这个库将决定使用 Fly Dynamic Image Resizer 或 Auto Cloudinary 插件，但请确保 一次只激活这些插件中的一个。如果没有激活这些插件，库将回退到默认的Wordpress附件获取器 wp_get_attachment_image_src()，并给定数组大小。

该库还可以处理SVG。为了在WP媒体库中支持SVG，安装 SVG Support。

有了这些，您就可以直接在模板文件中实例化以下所有类。 然而，为了尽可能优化您的图片和代码，还有更多建议。

处理图片大小

要处理响应式图片，我们首先需要为各种断点准备一个或多个图片大小。可以使用以下类定义图片大小

Fronty\ResponsiveImages\Sizes\ImageSize 是图像尺寸和变换的表示。这个类单独用于非响应式图片，其中只需要一个大小。
Fronty\ResponsiveImages\Sizes\ImageSizeList 代表了一组 ImageSize 对象，用于响应式图片，其中每个断点需要不同的尺寸。
Fronty\ResponsiveImages\Sizes\BootstrapSizes 是一个辅助类，根据指定的容器宽度和网格列数生成 ImageSizeList。

请参阅这些对象的详细文档。

与图片一起工作

库包含两个主要类，用于处理图片

Fronty\ResponsiveImages\UploadImage 用于处理在 WP 媒体库中上传的图片
Fronty\ResponsiveImages\ThemeImage 用于处理位于您的主题目录中的图片（徽标、背景等）

请参阅这些对象的详细文档。

WP 过滤器

ThemeImage 和 UploadImage 对象都允许您使用 WP 过滤机制来更改它们的一些输出。

请参阅所有可用过滤器的列表。

依赖关系

Nette\Utils

代码依赖于来自 Nette\Utils 的轻量级实用类，尤其是以下类

HTML 元素用于处理 img HTML 标签
字符串用于安全 UTF-8 字符串操作
ArratHash 用于智能数组对象

其他依赖关系

enshrined/svg-sanitize：在将上传的 SVG 内联到模板之前删除它们的 ids 和 classes。
paquettg/php-html-parser 替换 Gutenberg 图片块中的响应式图片标签。

@todo - 在懒加载中不删除 src，而是用占位符代替（添加到配置） - UploadImage

fronty / responsive-images

维护者

详细信息