femundfilou/kirby-image-snippet

用于处理Kirby中图像的片段和辅助方法

维护者

详细信息

github.com/femundfilou/kirby-image-snippet

主页

源代码

问题

安装次数: 2,797

依赖关系: 0

建议者: 0

安全: 0

星标: 2

关注者: 1

分支: 0

开放问题: 0

类型:kirby插件

0.2.0 2024-02-18 12:42 UTC

Requires

Requires (Dev)

MIT 2afaf6026ccc747d4cff61467dc09cf1bb5f2a1e

  • Justus Kraft <hallo.woop@justuskraft.de>

kirby-plugin

This package is auto-updated.

Last update: 2024-09-18 14:08:25 UTC

README

用于处理Kirby中图像的片段和辅助方法。

安装

通过composer安装

要使用这些片段和辅助方法，您需要通过composer安装此包。

composer require femundfilou/kirby-image-snippet

使用方法

片段

<?php snippet('image', ['image' => $page->images()->first()]); ?>

字段方法

<div data-cover='<?= $page->images()->first()->toImageInterface()->toJson(); ?>' data-images='<?= $page->images()->toImageInterfaces()->toJson(); ?>'></div>

选项

您可以根据每张图片覆盖默认选项。

<?php snippet('image', ['image' => $page->images()->first(), 'ratio' => 1, 'dimensions' => [200]]); ?>
<div data-cover='<?= $page->images()->first()->toImageInterface(['ratio' => 1, 'dimensions' => [200]])->toJson(); ?>'></div>

懒加载

您可以通过在选项中定义 lazy => true 来激活懒加载。然后，片段将向 picture 元素添加 data-lazyload，并将srcset作为 data-srcset 添加到每个 <source>。然后您必须使用自己的javascript实现来懒加载图像。

配置

默认

您可以在网站的 site/config.php 中覆盖默认配置。

<?php

return [
  'femundfilou.image-snippet' => [
    'placeholder' => [
        'width' => 50,
        'blur' => 10,
        'quality' => 50
    ],
    'defaults' => [
        'ratio' => 0,
        'quality' => 80,
        'blur' => 0,
        'grayscale' => false,
        'lazy' => false,
        'formats' => ['webp', 'jpg'],
        'dimensions' => [400, 800, 1140],
    ],
  ]
];

?>