README

在 Twig 和 October CMS 中实时调整和转换图片。

要求

• October CMS
• PHP 7.0 或更高版本
• PHP fileinfo 扩展
• PHP gd 扩展 或 imagick 扩展

请注意，GD 由 PHP 的内存限制所限制，而 Imagick 则不是。如果您的网站在调整图片大小时返回 503，请尝试使用 Imagick（可以通过设置进行更改）。

入门

• 安装
• October CMS 使用

安装

您可以通过多种方式安装此插件

通过 Composer

在 October CMS 项目的文件夹中运行以下命令以安装插件。

composer require abwebdevelopers/oc-imageresize-plugin
php artisan october:up

通过更新和插件屏幕

在 October CMS 后端中，您可以导航到 设置 > 更新和插件，然后单击 安装插件 按钮，将插件安装到 October CMS 中。将 ABWebDevelopers.ImageResize 添加到搜索框，以便选择此插件并安装。

通过命令行

在 October CMS 项目的文件夹中运行以下命令以安装插件。

php artisan plugin:install ABWebDevelopers.ImageResize

October CMS 使用

此插件利用 Intervention Image 的神奇力量轻松调整和转换您的图片。请注意，此插件不涵盖 Intervention Image 库的每个功能。

基本缩放

Twig 过滤器: | resize(int $width, int $height, array $options)

在 Twig 中，使用 | resize 过滤器执行基本缩放。缩放需要至少两个尺寸参数之一。

Resize to width 1000px and height 700px:
<img src="{{ image | media | resize(1000, 700) }}">

Resize to width 1000px and automatically calculate height:
<img src="{{ image | media | resize(1000) }}">

Resize to height 700px and automatically calculate width:
<img src="{{ image | media | resize(null, 700) }}">

还有一个可选的第三个参数，options，允许您指定缩放模式，以及以下详细说明的任何其他图像修改。

缩放模式

缩放模式几乎与 CSS3 background-size 模式同义，以便更容易记住。可用选项包括：auto（默认），cover 和 contain，每个都与它们的 CSS 相似，还有一个额外的模式：stretch，其行为类似于基本的 <img> 元素。

Default (image is displayed in its original size):
<img src="{{ image | media | resize(1000, 700, { mode: 'auto' }) }}">

Resize the background image to make sure the image is fully visible
<img src="{{ image | media | resize(1000, 700, { mode: 'contain' }) }}">

Resize the background image to cover the entire container, even if it has to cut a little bit off one of the edges
<img src="{{ image | media | resize(1000, 700, { mode: 'cover' }) }}">

Stretch and morph it to fit exatly in the defined dimensions
<img src="{{ image | media | resize(1000, 700, { mode: 'stretch' }) }}">

当使用 mode: cover（别名 mode: crop）时，您可以指定 fit_position 修改器以选择缩放中心应聚焦的位置。

其他修改

此插件实现了一些图像调整工具和过滤器，它们利用其 Intervention Image 库的对应工具。

使用修饰符很简单，要么以 key: value 的形式添加到缩放过滤器的第三个参数中，要么使用修改过滤器，如下所示

<img src="{{ image | media | resize(1000, 700, { modifier: value }) }}">
<img src="{{ image | media | modify({ modifier: value }) }}"> <!-- Same size, just modified -->

上面的几个示例

<img src="{{ image | media | resize(1000, 700, { brightness: 50 }) }}">
<img src="{{ image | media | resize(1000, 700, { invert: true }) }}">
<img src="{{ image | media | resize(1000, 700, { rotate: 45 }) }}">
<img src="{{ image | media | resize(1000, 700, { background: '#fff' }) }}">
<img src="{{ image | media | resize(1000, 700, { colorize: '65,35,5' }) }}">

请注意：为了将图像编码为 WebP 格式，您需要在选择的驱动程序（Imagick 或 GD）上启用 WebP 支持。默认情况下，您可能不会启用 WebP 支持，因此使用此格式可能会导致错误或损坏的图像。

过滤器（配置模板）

Image Resize 插件中的过滤器，虽然与 Intervention Image 中的过滤器概念相似，但在此插件中的处理方式不同。

过滤器在 设置 > 图像调整器 页面上指定。通过单击顶部的 过滤器 选项卡，您可以指定一个过滤器 "代码"，该代码可以对图像应用一系列增强和修改。一旦保存，您就可以在 resize 和 modify Twig 过滤器中使用 filter 选项来指定要使用的过滤器。

一个常见的例子是一个基本的缩略图，您希望它始终为 格式: jpg，模式: cover，质量: 60，最大宽度: 200，最大高度: 200，以及可能还有 背景: #fff。

使用过滤器，您可以指定上述内容，给它起一个有用的名字，比如 缩略图，然后只需执行以下操作

<!-- display thumbnail -->
<img src="{{ image | media | modify({ filter: 'thumbnail' }) }}">
or
<!-- display thumbnail, but 150x150 -->
<img src="{{ image | media | resize(150, 150, { filter: 'thumbnail' }) }}">

这将使用预定义的修改器列表，并用提供的任何修改器覆盖它们，例如

<img src="{{ image | media | modify({ filter: 'thumbnail', brightness: -30, contrast: 30 }) }}">

过滤器中有几个新的修改器，包括：min_width，max_width，min_height，max_height，它们都是对使用过滤器图像尺寸的约束。

如果您使用它，请注意，如果您与 | resize(w, h) 函数一起使用，如果提供的尺寸超出约束范围，则将忽略这些尺寸。

在PHP中使用库

如果您想在Twig之外实现自己的库使用，可以以非常类似的方式使用它

$resizer = new \ABWebDevelopers\ImageResize\Classes\Resizer($image);
$resizer->resize(800, 250, [
    'rotate' => 45
]);
// $resizer->render(); // only use this if you intend on aborting the script immediately at this point

这与以下内容同义

<img src="{{ image | resize(800, 250, { rotate: 45 }) }}">

错误和新功能

我们鼓励您提交与任何错误或功能相关的问题或请求，这样每个人都可以从中受益。

特别感谢

• Intervention Image