README

Filament 图像库

此包为 Filament 中与 outerweb/image-library 交互提供了一种方式。

它添加了

一个新的字段类型，可以从图像库中选择图像或上传一个新的图像。
一个页面来管理上传的图像。
一个裁剪器，用于裁剪每个配置的图像转换。
一个“拖动排序”功能。
可编辑的图像 HTML 属性：标题和 alt。
通过使用我们的 filament-translatable-fields 包与 spatie/laravel-translatable 一起使用。

安装

您可以通过 composer 安装此包

composer require outerweb/filament-image-library

您可以使用以下命令发布配置文件

php artisan vendor:publish --tag="filament-image-library-config"

您可以使用以下命令发布翻译

php artisan vendor:publish --tag="filament-image-library-translations"

创建或更新您的自定义主题

为了符合推荐的风格 Filament 插件的方式，您将需要 创建一个自定义主题。您可以在官方文档中找到描述的步骤这里。

这样做是为了确保插件中定义的所有 Tailwind 类都将包含在您的自定义主题中。因此，它将完美地适应您的主题。

之后，您可以将以下内容添加到 resources/css/filament/filament/tailwind.config.js 文件中的 content 数组

import preset from "../../../../vendor/filament/filament/tailwind.config.preset";

export default {
  presets: [preset],
  content: [
    // ...
    "./vendor/outerweb/filament-image-library/resources/views/**/*.blade.php",
  ],
};

然后，您可以通过运行 npm run build 来构建您自定义主题的资产。

配置底层 outerweb/image-library

根据 Image Library 文档中所述配置 outerweb/image-library 包。

自定义图像库页面

如果您需要自定义图像库页面，可以创建一个新的 Filament 页面，该页面扩展了 ImageLibrary 类。在配置文件中设置您的自定义页面，然后进行自定义。

配置导航组

要配置导航组，发布翻译文件，然后编辑导航组值。

将插件添加到您的面板

将插件添加到您希望使用的 Filament 面板

use Outerweb\FilamentImageLibrary\Filament\Plugins\FilamentImageLibraryPlugin;

class FilamentPanelProvider extends PanelProvider
{
    public function panel(Panel $panel): Panel
    {
        return $panel
            // ...
            ->plugins([
                FilamentImageLibraryPlugin::make(),
            ]);
    }
}

您可以指定用户可以上传图像的允许存储磁盘

use Outerweb\FilamentImageLibrary\Filament\Plugins\FilamentImageLibraryPlugin;

class FilamentPanelProvider extends PanelProvider
{
    public function panel(Panel $panel): Panel
    {
        return $panel
            // ...
            ->plugins([
                FilamentImageLibraryPlugin::make()
                    ->allowedDisks([
                        'public' => 'Public images',
                    ]),
            ]);
    }
}

在上面的示例中，用户将能够将图像上传到 public 磁盘并从中选择图像。UI 将显示磁盘名称为 Public images。您还可以添加磁盘名称的翻译。

默认情况下，如果您没有指定任何允许的磁盘，插件将启用公共磁盘。

您还可以使用 addAllowedDisk 方法添加磁盘

use Outerweb\FilamentImageLibrary\Filament\Plugins\FilamentImageLibraryPlugin;

class FilamentPanelProvider extends PanelProvider
{
    public function panel(Panel $panel): Panel
    {
        return $panel
            // ...
            ->plugins([
                FilamentImageLibraryPlugin::make()
                    ->addAllowedDisk('public', 'Public images'),
            ]);
    }
}

设置图像库页面的导航排序

您可以通过添加 navigationSort 方法来设置图像库页面的导航排序

use Outerweb\FilamentImageLibrary\Filament\Plugins\FilamentImageLibraryPlugin;

class FilamentPanelProvider extends PanelProvider
{
    public function panel(Panel $panel): Panel
    {
        return $panel
            // ...
            ->plugins([
                FilamentImageLibraryPlugin::make()
                    ->navigationSort(10),
            ]);
    }
}

这将允许您自定义图像库页面在导航中的索引。

用法

您可以将 ImageLibraryPicker 表单字段添加到您的表单中

use Outerweb\FilamentImageLibrary\Filament\Forms\Components\ImageLibraryPicker;

ImageLibraryPicker::make('image'),

允许选择多张图像

您可以通过添加 multiple 方法允许用户选择或上传多张图像

use Outerweb\FilamentImageLibrary\Filament\Forms\Components\ImageLibraryPicker;

ImageLibraryPicker::make('images')
    ->multiple(),

禁用上传功能

您可以通过添加 disableUpload 方法禁用上传功能

use Outerweb\FilamentImageLibrary\Filament\Forms\Components\ImageLibraryPicker;

ImageLibraryPicker::make('image')
    ->disableUpload(),

这将阻止用户通过此字段上传新图像。

禁用选择现有功能

您可以通过添加 disableExisting 方法禁用选择现有功能

use Outerweb\FilamentImageLibrary\Filament\Forms\Components\ImageLibraryPicker;

ImageLibraryPicker::make('image')
    ->disableExisting(),

这将阻止用户通过此字段选择现有图像。

禁用图像取消选择功能

您可以通过添加 disableImageDeselect 方法禁用图像取消选择功能

use Outerweb\FilamentImageLibrary\Filament\Forms\Components\ImageLibraryPicker;

ImageLibraryPicker::make('image')
    ->disableImageDeselect(),

这将防止用户通过此字段取消选中图像（们）。

禁用图像编辑功能

您可以通过添加disableImageEdit方法来禁用图像编辑功能

use Outerweb\FilamentImageLibrary\Filament\Forms\Components\ImageLibraryPicker;

ImageLibraryPicker::make('image')
    ->disableImageEdit(),

这将防止用户通过此字段编辑图像（们）。编辑功能允许用户设置图像标题和alt属性。

禁用图像编辑徽章功能

您可以通过添加disableImageEditBadges方法来禁用图像编辑徽章功能

use Outerweb\FilamentImageLibrary\Filament\Forms\Components\ImageLibraryPicker;

ImageLibraryPicker::make('image')
    ->disableImageEditBadges(),

这将防止用户通过此字段看到图像（们）上的编辑徽章。此徽章显示图像标题和alt属性是否缺失。

禁用图像排序功能

您可以通过添加disableOrderingImages方法来禁用图像排序功能

use Outerweb\FilamentImageLibrary\Filament\Forms\Components\ImageLibraryPicker;

ImageLibraryPicker::make('images')
    ->disableOrderingImages(),

这将防止用户通过此字段重新排序图像。注意：此功能仅在字段设置为允许多张图像时可用。

禁用图像裁剪功能

您可以通过添加disableImageCrop方法来禁用图像裁剪功能

use Outerweb\FilamentImageLibrary\Filament\Forms\Components\ImageLibraryPicker;

ImageLibraryPicker::make('image')
    ->disableImageCrop(),

这将防止用户通过此字段裁剪图像（们）。

在选择现有图像时配置每页项目数

您可以通过添加existingItemsPerPage方法来配置选择现有图像时的每页项目数

use Outerweb\FilamentImageLibrary\Filament\Forms\Components\ImageLibraryPicker;

ImageLibraryPicker::make('image')
    ->existingItemsPerPage(20),

这将设置选择现有图像模态中显示的项目数量。默认值为9。为了适应模态的样式，建议使用可以同时被2和3整除的数字。

过滤显示的图像转换

您可以通过添加filteredConversionDefinitions方法来过滤显示的图像转换

use Outerweb\FilamentImageLibrary\Filament\Forms\Components\ImageLibraryPicker;
use Outerweb\ImageLibrary\Entities\ConversionDefinition;

ImageLibraryPicker::make('image')
    ->filteredConversionDefinitions([
        'thumbnail',
        ConversionDefinition::get('16:9'),
    ]),

这将只显示图像选择器中的缩略图和16:9图像转换。您可以使用字符串或ConversionDefinition实例。

默认情况下，除了本包定义的图像转换外，所有图像转换都会显示。

禁用一个或多个图像转换

您可以通过添加disabledConversionDefinitions方法来禁用一个或多个图像转换

use Outerweb\FilamentImageLibrary\Filament\Forms\Components\ImageLibraryPicker;
use Outerweb\ImageLibrary\Entities\ConversionDefinition;

ImageLibraryPicker::make('image')
    ->disabledConversionDefinitions([
        'thumbnail',
        ConversionDefinition::get('16:9'),
    ]),

这将禁用图像选择器中的缩略图和16:9图像转换。所有其他图像转换将显示。您可以使用字符串或ConversionDefinition实例。

您可以始终结合使用filteredConversionDefinitions和disabledConversionDefinitions方法。

启用包转换

您可以通过添加enablePackageConversionDefinitions方法来启用包转换

use Outerweb\FilamentImageLibrary\Filament\Forms\Components\ImageLibraryPicker;

ImageLibraryPicker::make('image')
    ->enablePackageConversionDefinitions(),

这将启用图像选择器中的包转换。默认情况下，包转换是禁用的，因为它们似乎与您的表单不相关。

设置关系顺序列

您可以通过添加relationOrderColumn方法来设置关系顺序列

use Outerweb\FilamentImageLibrary\Filament\Forms\Components\ImageLibraryPicker;

ImageLibraryPicker::make('image')
    ->relationOrderColumn('sort_order'),

当处理多张图像时，您通常将与belongsToMany关系一起工作。我们已包含将图像同步到关联表的代码。如果您想要对图像进行排序，您可以在关联表中添加一个列来存储顺序。

在Infolist中显示所选图像

您可以通过添加ImageLibraryEntry infolist组件来在Infolist中显示所选图像

use Outerweb\FilamentImageLibrary\Filament\Infolists\Components\ImageLibraryEntry;

ImageLibraryEntry::make('image')
    ->label('Image(s)'),

这将显示所选图像。make方法的参数是您模型中关系的名称。

如果您想显示嵌套关系的图像（们），可以使用点表示法

use Outerweb\FilamentImageLibrary\Filament\Infolists\Components\ImageLibraryEntry;

ImageLibraryEntry::make('seoData.image')
    ->label('Image(s)'),

处理翻译

如果您使用的是spatie/laravel-translatable包，您可以使用我们的filament-translatable-fields包来使图像选择器可翻译。此包是本包的要求，因此您需要做的只是

将image-library.php配置文件中的spatie_translatable 配置选项设置为true。
请遵循README中的安装步骤。

outerweb / filament-image-library

维护者

详细信息