README

此插件为您的Kirby CMS安装添加了一个新的路由，允许您动态转换图像。当您希望让前端决定加载的图像大小时，这非常有用。

Schema

https://your-kirby-website.com/thumbs/{image-id}.{ext}?{transformations}

原始图像

https://your-kirby-website.com/thumbs/{image-id}.{ext}

宽度为640px的缩略图，高度自动

https://your-kirby-website.com/thumbs/{image-id}.{ext}?width=640

宽度为640px，高度裁剪的缩略图

https://your-kirby-website.com/thumbs/{image-id}.{ext}?width=640&height=640&crop=true

安装

composer require moritzebeling/kirby-headless-image-transformations

或将此存储库下载/克隆到您的Kirby项目的site/plugins中。

URL查询参数

您可以使用Kirby thumb()方法提供的所有选项（请参阅Kirby thumb()方法）

let options = {
    'autoOrient' => true,  // bool
    'crop'       => false, // bool
    'blur'       => false, // bool
    'grayscale'  => false, // bool
    'height'     => null,  // int
    'quality'    => 90,    // int 0-100
    'width'      => null,  // int
}

用法

如果您使用Kirby作为无头CMS，并且想在前端决定加载的图像大小或包含在srcset中，则此插件非常有用。您只需提供图像ID即可。

$image_id = $file->id();

加载单个大小

function serializeObjectToQueryString( options = {} ){
    const queryString = Object.keys(options).map(key => key + '=' + options[key]).join('&');
    return queryString ? '?' + queryString : '';
}

const options = {
    width: 640,
    height: 640,
    crop: true,
};

const host = 'https://your-kirby-website.com/thumbs';
const image_id = 'page-id/image-filename.jpg';

const thumb_url = `${host}/${image_id}${serializeObjectToQueryString( options )}`;

<img src={thumb_url} width={options.width} height={options.height} />

为srcset加载多个宽度

// createQueryString, url_base, image_id same as in example above

const sizes = [240,480,960];

let src = `${host}/${image_id}${serializeObjectToQueryString({ width: sizes[0] })}`;
let srcset = sizes.map( size => {
    const options = {
        width: size
    };
    return `${host}/${image_id}${serializeObjectToQueryString( options )} ${size}w`;
}).join(', ');

<img {src} {srcset} />

请注意，上面的html代码只是一个示例，在纯设置中无法工作，需要某种类型的模板引擎，例如Svelte。

选项和安全考虑

每当首次请求缩略图时，Kirby都会生成它并将其存储在media文件夹中。因此，每次首次请求缩略图时，都会稍微花费一些时间。

这也意味着，有不良意图的人可能会利用这一点来压倒您的服务器并耗尽您的磁盘空间。为了防止这种情况，您应该仅限制允许的转换到您实际需要的转换。

默认设置

// site/config/config.php

return [
    'moritzebeling.headless-image-transformations' => [
        /*
        These values can either be:
        - false (not allowed, will be ignored and might fallback to Kirby's default settings)
        - true (any value is allowed, do not use in production)
        - array (list of allowed values)
        */
        'allowed' => [
            'autoOrient' => false,
            'crop'       => [true,false],
            'blur'       => false,
            'grayscale'  => false,
            'height'     => [40,80,160,240,360,480,640,720,960,1280,1440,1920,2560,3200],
            'quality'    => false,
            'width'      => [40,80,160,240,360,480,640,720,960,1280,1440,1920,2560,3200],
        ]
    ],
];

坚持默认选项时，仅允许请求指定宽度和高度的缩略图以及裁剪。如果您需要其他选项，您应该通过您的site/config/config.php文件启用它们。

您还可以为Kirby设置一些缩略图选项默认值：https://getkirby.com/docs/reference/system/options/thumbs

开发

1. 安装一个全新的Kirby StarterKit
2. cd site/plugins
3. git clone此存储库

路线图

• 讨论预设图像大小是否有意义
• 检查浏览器缓存是否按预期工作

☕️ 支持

如果您喜欢这个插件，我将很高兴通过PayPal邀请我喝咖啡。如果您有任何关于进一步开发的想法或遇到任何问题，请打开问题或PR。谢谢！

保修

此插件仍在开发中，不提供任何保修。使用风险自担。