README

为单选按钮添加插图。

概述

此插件完全免费，并使用 MIT 许可证发布。然而，如果您将其用于商业项目并希望帮助我进行维护，请考虑 随意捐赠。

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

1. 安装

Kirby 3: 1.0.5 以下。 Kirby 4: 2.0.0+

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

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

2. 设置

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

2.1. 固定选项

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

必须将 image 值指定为文件名，字段将自动添加正确路径的前缀。

myimageradio:
  label: Pick a theme
  type: imageradio
  columns: 3
  options:
    light:
      text: Light theme
      image: light.jpg
    dark:
      text: Dark theme
      image: dark.jpg
    blue:
      text: Blue theme
      image: blue.jpg

2.2. 动态选项

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

必须将 image 值返回为 绝对 URL。

myimageradio:
  label: Pick a theme
  type: imageradio
  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.imageradio.baseUrl' => '{{ kirby.url("assets") }}/my-custom-folder',

4. 每字段选项

4.1. ratio

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

myimageradio:
  type: imageradio
  ratio: 1/1

4.2. fit

定义图像如何在容器内适应，是 contain 或 cover。默认为 cover。

myimageradio:
  type: imageradio
  fit: cover

4.3. back

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

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

4.4. mobile

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

myimageradio:
  type: imageradio
  mobile: false

5. 许可证

MIT