README

此插件为您的 Kirby 安装提供自定义面板，以添加断点和图片分辨率，以便对渲染的图片拥有完全的控制权。插件会在您指定的路径生成一个 JSON 文件，包含您的配置。要设置路径和其他选项，请参阅此 README 文件中的 选项 部分。

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

安装

下载

下载并将此存储库复制到 /site/plugins/responsive-images。

Git 子模块

git submodule add https://github.com/nerdcel/kirby3-responsive-images.git site/plugins/responsive-images

Composer

composer require nerdcel/kirby3-responsive-images

设置

模板

<?php responsiveImage(string 'teaser-home-cover', File $page->cover(), string 'optional-css-class', bool true, string 'Alt text', string 'webp');  ?>

输出

<picture>
  <source srcset="/media/pages/photography/trees/9888d3c6b0-1674556128/monster-trees-in-the-fog-1536x1536-crop-1.jpg" width="1536" height="1536" media="(min-width: 1440px) and (-webkit-min-device-pixel-ratio: 1.5), (min-width: 1440px) and (min-device-pixel-ratio: 1.5)">
  <source srcset="/media/pages/photography/trees/9888d3c6b0-1674556128/monster-trees-in-the-fog-1024x1024-crop-1.jpg" width="1024" height="1024" media="(min-width: 1440px)">
  <source srcset="/media/pages/photography/trees/9888d3c6b0-1674556128/monster-trees-in-the-fog-1080x1080-crop-1.jpg" width="1080" height="1080" media="(min-width: 720px) and (-webkit-min-device-pixel-ratio: 1.5), (min-width: 720px) and (min-device-pixel-ratio: 1.5)">
  <source srcset="/media/pages/photography/trees/9888d3c6b0-1674556128/monster-trees-in-the-fog-720x720-crop-1.jpg" width="720" height="720" media="(min-width: 720px)">
  <source srcset="/media/pages/photography/trees/9888d3c6b0-1674556128/monster-trees-in-the-fog-960x355-crop-1.jpg" width="960" height="355" media="(min-width: 480px) and (-webkit-min-device-pixel-ratio: 1.5), (min-width: 480px) and (min-device-pixel-ratio: 1.5)">
  <source srcset="/media/pages/photography/trees/9888d3c6b0-1674556128/monster-trees-in-the-fog-640x237-crop-1.jpg" width="640" height="237" media="(min-width: 480px)">
  <source srcset="/media/pages/photography/trees/9888d3c6b0-1674556128/monster-trees-in-the-fog-720x267-crop-1.jpg" width="720" height="267" media="(min-width: 0px) and (-webkit-min-device-pixel-ratio: 1.5), (min-width: 0px) and (min-device-pixel-ratio: 1.5)">
  <source srcset="/media/pages/photography/trees/9888d3c6b0-1674556128/monster-trees-in-the-fog-480x178-crop-1.jpg" width="480" height="178" media="(min-width: 0px)">
  <img src="http://kirby-playground.test/media/pages/photography/trees/9888d3c6b0-1674556128/monster-trees-in-the-fog-480x178-crop-1.jpg" width="480" height="178" class="" alt="Huge trees reaching into the fog" title="Huge trees reaching into the fog">
</picture>

选项

以下选项可以通过您的 site/config/config.php 文件进行设置

'nerdcel.responsive-images' => [
    'cache' => true,
    'configPath' => kirby()->root('content'),
    'configFile' => 'responsive-img.json',
    'quality' => 75,
    'defaultWidth' => 1024,
    'allowedRoles' => [
        'admin'
    ],
    'cropDriver' => function ($file, $options) {
        return $file->focusCrop(
            $options['width'],
            $options['height'],
            [
                'quality' => $options['quality'],
                'upscale' => $options['upscale'],
                'format' => $options['format'],
            ]
        );
    }
]

图片驱动

由于即将发布的 Kirby 4 版本，"crop" 驱动现在是一个回调函数。这允许您使用任何您想要的裁剪驱动。例如，如果您正在使用 flokosiol/kirby-focus 插件，您可以使用上面显示的驱动。一般来说，驱动期望一个具有以下签名的回调函数

function (File $file, array $options) {
    // do something with the file and return it
}

开发

前端组件基于 Kirby 的内部 UI Kit。开发使用 kirbyup npm 模块进行。要开始开发，只需从插件根目录运行以下命令

npm run dev

如果不起作用，请先运行 npm install。

许可证

MIT

致谢

• Marcel Hieke