README

Blade指令用于使用glide处理图片

安装方法

您可以在Statamic控制面板的工具 > 插件部分搜索此插件并点击安装，或者从项目根目录运行以下命令

composer require justbetter/statamic-glide-directive

用法

此包添加了一个blade指令。您可以在blade指令中放入一个资产，它将根据配置中的预设渲染图片。下面列出了一个带有所有选项的指令示例。

@responsive($image, [
    'alt' => 'This is an alt text.', 
    'class' => 'some classes here',
    'loading' => 'lazy'
])

要允许图片在调整大小时更改，请在布局的head中添加此include

@include('statamic-glide-directive::partials.head')

配置

该包有一些默认配置。默认情况下，它将使用此插件配置中的预设。如果您已在Statamic配置中定义了资产预设，则将使用它。

默认配置

'presets' => [
    'placeholder' => ['w' => 32, 'h' => 32, 'q' => 100, 'fit' => 'crop_focal'],
    'xs' => ['w' => 320, 'h' => 320, 'q' => 100, 'fit' => 'crop_focal'],
    'sm' => ['w' => 480, 'h' => 480, 'q' => 100, 'fit' => 'crop_focal'],
    'md' => ['w' => 768, 'h' => 768, 'q' => 100, 'fit' => 'crop_focal'],
    'lg' => ['w' => 1280, 'h' => 1280, 'q' => 100, 'fit' => 'crop_focal'],
    'xl' => ['w' => 1440, 'h' => 1440, 'q' => 100, 'fit' => 'crop_focal'],
    '2xl' => ['w' => 1680, 'h' => 1680, 'q' => 100, 'fit' => 'crop_focal'],
],

占位符

在页面加载时，将加载图片的小型变体，如果您不希望这样，可以在配置文件中禁用占位符。

'placeholder' => true,

来源

配置您希望使用的来源。默认情况下，我们只使用webp来源，也可以根据图片MIME类型配置来源，或者您可以使用两者。

'sources' => 'webp',

发布

php artisan vendor:publish --provider="JustBetter\ImageOptimize\ServiceProvider"

justbetter / statamic-glide-directive

维护者

详细信息

README

安装方法

用法

配置

占位符

来源

发布