johncarter / filament-focal-point-picker

Filament Admin 的图像焦点选择器。

维护者

详细信息

github.com/johncarter-/filament-focal-point-picker

主页

源代码

问题

资助包维护！
johncarter

安装次数: 10,981

依赖者: 2

建议者: 0

安全性: 0

星标: 41

关注者: 2

分支: 8

开放性问题: 0

语言:Blade

v3.0.0 2024-04-04 16:56 UTC

Requires

Requires (Dev)

MIT 55e99f4d8c194e1ff49d6b15e23b00e591a7a503

  • John Carter <john.woop@johncarter.co.uk>

laraveljohncarterfilament-focal-point-picker

This package is auto-updated.

Last update: 2024-09-04 18:07:45 UTC

README

为 Filament Admin 定制的字段。该字段允许您将图像上的一个位置保存为焦点或焦点。这可以与 CSS object-position 属性一起使用，以对不同宽高比的图像进行裁剪。

该字段返回一个包含两个百分比的 string：从左边的距离，从顶部的距离。例如，"17% 54%"。

查看此视频进行演示： https://vimeo.com/690530672

安装

您可以通过 composer 安装此包

composer require johncarter/filament-focal-point-picker

可选地，您可以使用以下命令发布视图

php artisan vendor:publish --tag="filament-focal-point-picker-views"

使用方法

FileUpload::make('my_image_field')->maxFiles(1),
FocalPointPicker::make('focal_point')
    ->default('10% 25%') // default: "50% 50%"
    ->imageField('my_image_field')
    // Or, return an image url from a closure on the image() method
    // ->image(function() {
    //     return 'https://www.example.com/images/image1.jpg'
    // })

然后在您的 blade 模板中

<div class="aspect-w-16 aspect-h-5">
    <img src="{{ $myPageData['image'] }}" class="object-cover w-full h-full" style="object-position: {{ $myPageData['focal_point'] }}" />
</div>

变更日志

请参阅 CHANGELOG 了解最近更改的更多信息。

贡献

请参阅 CONTRIBUTING 了解详细信息。

安全漏洞

请审查 我们的安全策略 了解如何报告安全漏洞。

鸣谢

许可

MIT 许可证 (MIT)。请参阅 许可文件 了解更多信息。