README

由于 Kirb3.6 引入了对 WebP & AVIF 图像的支持，并且现代浏览器很好地支持 lazy-attribute，因此我认为这个插件已经过时。因此，我将不再继续开发它。

Kirby 3 Srcset

Kirby 3 插件，用于创建懒加载图像 srcset

此插件扩展了核心 (image: ) - Kirby 标签。所有适用于 (image: ) 的参数都可以与 (lazysrcset: ) 一起使用，以产生相同的结果。默认情况下，插件会添加以下内容

• lazyloading 类到 img 元素
• 基于标签参数 width, height, quality 的 data-src 图像。这取代了 src 属性。
• 带有由 Kirby 核心方法 $file->srcset() 生成的 srcsets 的 data-srcset 属性
• data-sizes="auto" 属性
• data-thumb-srcset 属性，将 srcset 数组作为 json 打印出来（仅当调试时）
• 带有图像与 img 元素的父元素的比率 data-ratio 属性
• 它注册了一个自定义的 markdown 组件，因为需要包装和展开 markdown。

目录

1. 商业用途
2. 安装
3. 使用 Kirby 标签
4. 使用编辑块
5. 使用 PHP
6. 设置
7. 设置
8. 常见问题解答
9. 图像比例

商业用途

支持开源！

此插件是免费的，但如果您将其用于商业项目，请考虑赞助我或捐款。
如果我的工作帮助您赚了一些钱，那么我认为我可能也应该得到一些回报，对吧？

行善。分享一点。谢谢。

－ Bruno
 

安装

• 将 master.zip 解压为文件夹 site/plugins/kirby3-srcset 或
• git submodule add https://github.com/bnomei/kirby3-srcset.git site/plugins/kirby3-srcset 或
• composer require bnomei/kirby3-srcset

使用 Kirby 标签

# like image tag
(image: myfile.jpg)
(lazysrcset: myfile.jpg)
(lazysrcset: myfile.jpg link: mypdf.pdf)
(lazysrcset: myfile.jpg class: myclass)

# changing width, height and/or quality of src (not srcset)
(lazysrcset: myfile.jpg width: 640 height: 480 quality: 70)

# different lazy class
(lazysrcset: myfile.jpg lazy: lazy)

# different or no prefix
(lazysrcset: myfile.jpg prefix: )

# remove wrapping figure element
(lazysrcset: myfile.jpg figure: false)

# remove the ratio information
(lazysrcset: myfile.jpg ratio: false)

# sizes from config
(lazysrcset: myfile.jpg sizes: default)
(lazysrcset: myfile.jpg sizes: breakpoints)

# sizes are supported in various formats
# string, number(s), with and without px, comma and brackets
(lazysrcset: myfile.jpg sizes: 320 640 960)
(lazysrcset: myfile.jpg sizes: [320, 640, 960])
(lazysrcset: myfile.jpg sizes: 320px, 640px, 960px)

使用编辑块

特别允许插件块

当您在编辑器字段中特定地定义允许哪些块时，您需要添加类似这样的插件块

fields:
 text:
   label: Editor
   type: editor
   allowed: 
     - h1
     - paragraph
     - srcset # matches name of plugin

PHP 使用方法

echo $page->image('ukulele.jpg')->lazysrcset();

// 320 and 1200
echo $page->image('ukulele.jpg')->lazysrcset('default');
 
// 576, 768, 992, 1200
echo $page->image('ukulele.jpg')->lazysrcset('breakpoints');
 
// 320, 640, 960
echo $page->image('ukulele.jpg')->lazysrcset(['sizes' => [320, 640, 960]]);

// other options
echo $page->image('ukulele.jpg')->lazysrcset([
    // lazysrcset
    'sizes' => [320, 640, 960],
    'lazy' => 'lazyloading-with-flickity',
    'prefix' => 'data-flickity-lazyload-',
    'figure' => false,
    'autosizes' => false,
    // image
    'width' => 640,
    'height' => 480,
    // ...
]);

设置

配置

您需要定义srcsets。插件将使用这些以及核心$file->srcset()函数。

/site/config/config.php

return [
    'thumbs' => [
        'srcsets' => [
            'default' => [320, 1200],
            'breakpoints' => [576, 768, 992, 1200],
        ],
    ],
];

JS

将aFarkas/lazysizes添加到您的js依赖中，并阅读文档。您也可以通过在设置中稍作调整使用lozad.js。

自动大小检测的最小CSS

您需要一些CSS来使lazysizes库自动大小检测工作。

figure { width: 100%; }
img[data-sizes="auto"] { display: block; width: 100%; }

重要：CSS必须在JS执行之前应用到DOM上。确保顺序正确且它们不是异步应用的。使用像muicss/loadjs这样的库，您可以异步加载它们并按正确顺序应用。否则，您将面临首次加载时图像模糊的问题。

提示图像比例的CSS

默认情况下，插件会提示图像比例以最小化回流并避免页面跳动。您只需将以下CSS添加到代码库中。

提示：如果您将ratio设置为一个不同的字符串，则可以使用不同的类名。如果您将ratio或figure设置为false，则比例提示将消失。

CSS

/* class name must matches the value of `ratio` setting. */
.lazysrcset-ratio {  
    position: relative;
}
.lazysrcset-ratio > img {
    display: block;    
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}
.lazysrcset-ratio > img:after {
    display: block;
    width: 100%;
    height: 0;
    content: '';
}

tailwind.css

.lazysrcset-ratio {
    @apply relative;
    & > img {
        @apply absolute top-0 left-0 w-full h-full block;
        &:after {
            content: '';
            @apply block h-0 w-full;
        }
    }
}

每个figure元素将被一个定义比例的style元素前缀。例如，具有16/9比例的图像及其figure image元素的CSS样式如下

无figcaption： figure > img

<style>.lazysrcset-ratio[data-ratio="56.25"]{padding-bottom:56.25%;}</style><figure data-ratio="56.25" class="lazysrcset-ratio"><!--- image tag with srcset --></figure>

有figcaption： figure > ((div > img) + figcaption)

<style>.lazysrcset-ratio[data-ratio="56.25"]{padding-bottom:56.25%;}</style><figure><div data-ratio="56.25" class="lazysrcset-ratio"><!--- image tag with srcset --></div><figcaption>with caption</figcaption></figure>

使用nonce

您可以使用选项设置自定义nonce或安装安全头部插件。

<style nonce="A-NONCE-HERE">...

设置

常见问题解答

• 插件会覆盖(image: )-Kirbytag吗？不会，它永远不会。
• 为什么没有包括懒加载的JavaScript库？因为那应该是网站构建链的一部分。
• 支持IE11吗？您需要使用一个图片Polyfill。
• 为什么没有sizes属性？因为它没有被定义，因为js库lazysizes可以根据实际屏幕大小动态创建这些属性。查看autosizes设置。
• 使用Flickity进行懒加载？请使用'prefix' => 'data-flickity-lazyload-'。
• 图片元素支持在哪里？这个插件v2.x.x版本可以处理图片元素。我已经移除了这一功能，转而关注更好的kribytag和懒加载，以简化插件。

兼容性良好

• 缩略图Imageoptim插件需要付费账户。

免责声明

本插件提供“原样”使用，不提供任何保证。请在使用前自行测试，并在生产环境中使用时自行承担风险。如果您发现任何问题，请创建一个新问题。

许可证

MIT

不建议在任何宣传种族主义、性别歧视、同性恋恐惧症、动物虐待、暴力或其他任何形式的仇恨言论的项目中使用此插件。