README

视觉图像剪辑/裁剪。

概述

安装
要求
考虑捐赠
面板使用
替换文件字段
前端使用
许可证

安装

下载

下载并将此仓库复制到 /site/plugins/k3-image-clip

Git 子模块

git submodule add https://github.com/mullema/k3-image-clip.git site/plugins/k3-image-clip

Composer

composer require mullema/k3-image-clip

要求

Kirby 3.6 -> 使用 v3
Kirby 3.5 -> 使用 v2.2.0
Kirby 3.3 -> 使用 v2.1.0
Kirby 3.2.5 -> 使用 v2.0.0
GD 库或 ImageMagick

考虑捐赠

此插件免费，但如果您将其用于商业项目，请考虑进行捐赠。[捐赠链接](https://www.paypal.me/mullema/10)

面板使用

此插件包含一个 image-clip 字段。它基于 files 字段并支持所有选项。有关 files 字段的更多信息，请参阅Kirby3 文档。

示例蓝图

myimages:
  type: image-clip
  query: site.find('photography/animals').images
  layout: cards
  size: small
  clip:
    minwidth: 400
    minheight: 300
    maxwidth: 800
    maxheight: 600
    ratio: fixed

所有值均为像素。
minwidth、minheight、maxwidth、maxheight 限制剪辑/裁剪选择区域。
剪辑选项不是必需的，但在大多数情况下，建议定义 minwidth 和 minheight。
通常，调整结果图像比定义 maxwidth 和 maxheight 更有意义。
ratio: fixed 锁定比例
- 如果定义了 minwidth 和 minheight，
- 或者定义了 maxwidth 和 maxheight，
- 或者以上所有。

该字段对图像大小和类型进行基本检查，但主要依赖于您在文件蓝图中定义接受的 MIME 类型或图像大小。您可以按模板过滤图像列表，如下所示

query: site.find('photography').children.images.filterBy('template', 'cover')

替换文件字段

image-clip 字段可以通过更改字段类型来替换 files 字段。只需替换

type: files

为

type: image-clip

这也适用于使用原生 files 字段而不是 image-clip 字段。

前端使用

如何获取 image-clip 字段中定义的图像。关于 clip() 方法的更多信息，请参阅下面的内容。

单张图片

if ($image = $page->myimages()->toImage()) {
    echo $image->clip(500);
}

重要： ~~toFile~~ 不起作用，请使用 toImage() 代替。
toImage() 返回一个包含所有功能的 File 对象。

多张图片

foreach($page->myimages()->toImages() as $image) {
    echo $image->clip(500);
}

重要： ~~toFiles~~ 不起作用，请使用 toImages() 代替。
toImages() 返回一个包含所有功能的 Files 集合。

文件方法

`$file->clip()`

剪辑并调整大小。生成剪辑区域的缩略图。

适配器为 $file->thumb()。返回 FileVersion|File 对象。

if ($image = $page->myimages()->toImage()) {
    echo $image->clip(500);
}

$file->clip(200, 300);   // bestfit
$file->clip(200);        // width 200px
$file->clip(null, 300);  // height 300px
$file->clip();           // clip area without resizing

与 image-clip 字段一起使用时，会自动调用字段剪辑数据。
参数：clip(width, height)
- 如果同时定义了 width 和 height，则图像将使用 bestfit 调整大小。

`$file->srcset()`

使用此方法生成响应式图像的 srcset 属性。有关其功能的信息，请参阅Kirby3 文档。

<?php if ($image = $page->myimages()->toImage()): ?>
    <img srcset="<?= $image->srcset([300, 800, 1024]) ?>">
<?php endif; ?>

`$file->thumb()`

缩略图方法现在接受 clip 选项，并可用于任何可调整大小的图像。

$file->thumb([
    'width' => 400,
    'clip' => [
       'width' => 500,
       'height' => 200,
       'top' => 10,
       'left' => 200
    ]
]);

裁剪/裁剪原始图像顶部 10px 和左侧 200px 的 500x200px 正方形。
将结果图片调整到400像素宽度。
如果同时使用clip和crop，则crop将被忽略。

在Kirby3文档中了解更多关于thumb方法的信息。

`$file->getClip()`

返回剪辑数据。

例如，与$file->thumb()方法结合使用时非常有用。

if ($image = $page->myimages()->toImage()) {
    echo $image->thumb([
       'width' => 1200,
       'grayscale' => true,
       'clip' => $image->getClip()
    ]);
}

许可证

MIT

致谢

Matthias Müller

mullema / k3-image-clip

维护者

详细信息