README

为复选框添加插图。

概述

此插件完全免费，并遵循 MIT 许可证发布。但是，如果您在商业项目中使用它，并希望帮助我维护，请考虑进行任意金额的捐赠。

• 1. 安装
• 2. 设置
  • 2.1. 固定选项
  • 2.2. 动态选项
• 3. 全局选项
• 4. 字段选项
• 5. 许可证

1. 安装

Kirby 3: 至 1.0.6。Kirby 4: 2.0.0+

下载并将此存储库复制到 /site/plugins/imageboxes

或者，您可以使用 composer 安装它：composer require sylvainjule/imageboxes

2. 设置

最好将字段与设置 columns 选项一起使用。

2.1. 固定选项

如果字段的选项是固定的，则图像需要放置在您的安装的 assets/images 文件夹中。

image 值必须是文件名，字段将自动为其添加正确的路径。

myimageboxes:
  label: Categories
  type: imageboxes
  columns: 3
  options:
    bears:
      text: Brown bears
      image: bears.jpg
    bisons:
      text: Bisons
      image: bisons.jpg
    marmots:
      text: Marmots
      image: marmots.jpg

2.2. 动态选项

此字段与 query 和 api 获取兼容。您需要明确设置结果文本、存储值和图像 URL。

image 值必须返回 绝对 URL。

myimageboxes:
  label: Categories
  type: imageboxes
  columns: 3
  options: query
  query:
    fetch: page.images
    text: "{{ file.filename }}"
    value: "{{ file.id }}"
    image: "{{ file.resize(512).url }}"

注意使用 {{ file.resize(512).url }} 而不是 {{ file.url }}。原因有两个

• 使用缩略图 URL 可以防止加载不必要的较大图像。
• 512 是文件字段缩略图的默认值。因此，很可能缩略图已经创建。

我建议使用 resize 数字 已经由面板使用（128、256、512、768、1024）。

3. 全局选项

3.1. baseUrl

如果您希望从与 assets/images 文件夹不同的位置查询图像，您可以在 config.php 文件中设置 baseUrl 选项，以您想要的任何文件夹。例如

'sylvainjule.imageboxes.baseUrl' => '{{ kirby.url("assets") }}/my-custom-folder',

4. 字段选项

4.1. ratio

图像容器的比例，根据您的图像进行调整。默认为 1/1。

myimageboxes:
  type: imageboxes
  ratio: 1/1

4.2. fit

定义图像应如何适合其容器，是 contain 还是 cover。默认为 cover。

myimageboxes:
  type: imageboxes
  fit: cover

4.3. back

定义透明/包含图像背后的背景。接受任何有效的 CSS 属性作为 background 属性。默认为 false。

myimageboxes:
  type: imageboxes
  back: white # or '#fefefe', or 'rgb(255, 0, 255)', etc.

4.4. mobile

默认情况下，当面板切换到其移动视图时，不显示图像。不建议这样做，但如果您想覆盖此设置，请将选项设置为 true。

myimageboxes:
  type: imageboxes
  mobile: false

5. 许可证

MIT