README

此插件提供了一种直观且灵活的图像裁剪字段。

该字段基于vue-cropperjs和gumlet/php-image-resize。

安装

使用以下任一方案。

下载

下载并将此存储库复制到`/site/plugins/kirby-plugin-image-crop-field`。

Git子模块

git submodule add https://github.com/steirico/kirby-plugin-image-crop-field.git site/plugins/kirby-plugin-image-crop-field

Composer

composer require steirico/kirby-plugin-image-crop-field

使用方法

文件蓝图使用

插件定义了新的字段类型imagecrop，它可以在文件蓝图中使用。为图像定义适当的文件蓝图，并按以下方式添加字段

/site/blueprints/files/image.yml:

fields:
  crop:
    label: Image Crop
    type: imagecrop
    minSize:
      width: 700
      height: 250
    targetSize:
      width: 1400
      height: 500
    preserveAspectRatio: true

蓝图选项

`minSize`

定义从原始图像中裁剪出的区域的最小允许大小。

width: 允许的最小宽度，大于或等于1
height: 允许的最小高度，大于或等于1

默认值

width: 1
height: 1

`targetSize`

裁剪后的图像的目标大小。结果图像将按targetSize.width定义的width和按targetSize.height定义的height进行缩放。

width: 目标图像的宽度，大于或等于1
height: 允许的最小高度，大于或等于1

对于width和height，负值被视为绝对值。

默认值：结果图像表示裁剪区域，并且不会被缩放。

`preserveAspectRatio`

是否保留裁剪区域按minSize.width / minSize.height定义的纵横比，或者允许自由裁剪

true: 保留纵横比
false: 自由裁剪

默认值：false

面板中的裁剪图像

插件提供了一个名为croppedImage的文件方法，该方法可以像其他文件方法一样应用。`croppedImage`提供了一个裁剪后的原始图像的file对象。

以下配置在`files sections`中预览裁剪图像

/site/blueprints/pages/album.yml:

title: Album

sections:
  images:
    type: files
    layout: cards
    template: image
    info: "{{ file.dimensions }}"
    image:
      ratio: 16/9
      cover: false
      query: file.croppedImage
    min: 1
    size: small

在模板和代码片段中使用裁剪图像

在模板和代码片段中使用名为croppedImage的文件方法，以在模板和代码片段中处理裁剪图像

<figure>
  <?= $page->image()->croppedImage() ?>
</figure>

问题

如果您遇到任何问题或意外行为，请随时提交问题。

目前存在一个已知问题，当通过$page->images()获取图像时，裁剪图像会显示两次。

许可证

MIT

steirico / kirby-plugin-image-crop-field

维护者

详细信息