elsayed85/nova-image-gallery-field

为Nova提供上传多张图片并排序的字段

1.0.1 2022-10-08 18:33 UTC

This package is not auto-updated.

Last update: 2024-09-23 02:00:57 UTC


README

一个自定义Nova字段,允许多张图片上传并排序

Stable Version License PHP Version Require

功能

  • 适用于Laravel Nova ^4.0
  • 将多张图片上传到spatie/laravel-medialibrary集合中。
  • 图片排序
  • 自定义图片验证
  • 拖放
  • 暗黑模式

安装

composer require ardenthq/nova-image-gallery-field

要求

使用

注意 此包重复使用了在Laravel\Nova\Fields\Trix字段上用于存储和处理文件的逻辑。这意味着我们需要遵循在Laravel Nova 文档中提到的相关步骤,以添加迁移和修剪文件。

  1. 定义两个数据库表以存储挂起和持久化的Trix上传。为此,创建一个迁移,包含以下表定义
Schema::create('nova_pending_trix_attachments', function (Blueprint $table) {
    $table->increments('id');
    $table->string('draft_id')->index();
    $table->string('attachment');
    $table->string('disk');
    $table->timestamps();
});

Schema::create('nova_trix_attachments', function (Blueprint $table) {
    $table->increments('id');
    $table->string('attachable_type');
    $table->unsignedInteger('attachable_id');
    $table->string('attachment');
    $table->string('disk');
    $table->string('url')->index();
    $table->timestamps();

    $table->index(['attachable_type', 'attachable_id']);
});
  1. 在您的app/Console/Kernel.php文件中,您应该注册一个每日任务以修剪挂起附件表和存储中的任何过时附件。Laravel Nova提供了完成此操作的作业实现
use Laravel\Nova\Trix\PruneStaleAttachments;

$schedule->call(function () {
    (new PruneStaleAttachments)();
})->daily();
  1. ImageGalleryField字段添加到您的Nova资源中。

  2. 请注意,图片将根据传递给字段make方法的第一个参数或第二个参数(如果设置了)的名称存储在Spatie\MediaLibrary\MediaCollections\Models\Media集合中。(不要忘记在模型中注册媒体集合

  3. 使用rules()方法定义每个图片使用的规则。

  4. 使用rulesMessages()方法定义图片规则的自定义验证消息。

  5. 如果您想在拖放区域放置“帮助”文本,请使用help()方法。

示例

<?php
namespace App\Nova;

use Laravel\Nova\Http\Requests\NovaRequest;
use Laravel\Nova\Resource;
use Ardenthq\ImageGalleryField\ImageGalleryField;

final class ResourceName extends Resource
{
    // ....
    public function fields(NovaRequest $request)
    {
        return [
            // ....
            ImageGalleryField::make('Images')
                ->rules('mimes:jpeg,png,jpg,gif', 'dimensions:min_width=150,min_height=150', 'max:5000')
                ->rulesMessages([
                    'mimes'      => 'You must use a valid jpeg, png, jpg or gif image.',
                    'max'        => 'The image must be less than 5MB.',
                    'dimensions' => 'The image must be at least 150px wide and 150px tall.',
                ])
                ->help('Min size 150 x 150. Max filesize 5MB.'),
                // ...
        ];
    }
    // ...
}

开发

  1. 运行yarn nova:installyarn install来安装编译视图组件所需的所有必要依赖项。
  2. 在本地环境中修改组件时,请运行yarn run dev(或yarn run watch)。
  3. 如果您更改了vue组件,请确保在提交PR之前进行生产编译。

编译生产版本

  1. 运行yarn nova:installyarn install来安装编译视图组件所需的所有必要依赖项。
  2. 运行yarn run production

使用phpstan分析代码

composer analyse

使用php rector重构代码

composer refactor

使用php-cs-fixer格式化代码

composer format

运行测试

composer test

安全

如果您在此包中发现安全漏洞,请发送电子邮件至security@ardenthq.com。所有安全漏洞都将得到及时处理。

致谢

该项目之所以存在,归功于所有贡献者

许可证

MIT © Ardent