README

概述

Flexipic 是一个 Statamic 插件，旨在通过 Glide 无缝地生成响应式图片，并使用 picture 标签将其无缝集成到 Statamic 项目中。

安装

使用 Composer 安装。

composer require artemdanilov/flexipic

安装后，Flexipic 将创建 config/statamic/flexipic.php 文件。

使用方法

要启用 Flexipic 并生成响应式图片，只需在您想显示图片的地方插入以下代码行

{{ flexipic :src="assets" }}

或

{{ flexipic src="url_to_image" }}

它将生成一个包含 <source> 和 <img> 标签的 <picture> 标签。

在上面的示例中，图片是根据 config 文件中的参数生成的。这些参数对于全局使用是必要的。但是，您可以直接在标签中重写这些参数

{{ flexipic
    :src="image"
    :width="[320, 640]"
}}

在上面的示例中，标签将生成宽度分别为 320px 和 640px 的两张图片。请注意，我们没有指定高度属性，因为高度是根据元标签自动计算的。如果您想为您的图片设置另一个高度，请随时这样做

{{ flexipic
    :src="image"
    :width="[320, 640]"
    height="400"
}}

标签将为 width 数组中的第一个值设置 400px 的高度，并计算第二个值的高度。

当然，您还可以使用更多参数。

! 如果您的图片 URL 来自外部来源，您需要指定一个高度。 !

可用参数

Flexipic 支持各种参数，您可以将它们包含在您的标签中，每个参数都将生成 HTML 属性。但是，某些参数（如 quality、fit 或 placeholder）被排除在属性生成之外。

懒加载

如果您为平滑的懒加载效果设置了 loading 和 placeholder 参数，您应将一个 JS 函数传递到您的 resources/js/site.js 文件中

import flexipicLazyload from '../../vendor/artemdanilov/flexipic/dist/flexipicLazyload.min';

window.addEventListener('DOMContentLoaded', () => {
    flexipicLazyload('.flexipic');
})

支持

如果您在使用 Flexipic 时遇到任何问题或有任何疑问，请随时通过以下邮箱联系我 artemdanilow@gmail.com

许可证

Flexipic 在 MIT 许可证下发布。您可以自由使用、修改和分发它，以满足您的需求。

artemdanilov / flexipic

维护者

详情

README

概述

安装

使用方法

可用参数

懒加载

支持

许可证