README

此包是原始 advanced-nova-media-library 的增强版本。它管理图像，修复了在多个图像上传期间cropbox崩溃等问题，并允许通过拖放重新排序图像。

示例

安装

composer require nody-iq/advanced-nova-media-library

php artisan vendor:publish --tag=nova-media-library

模型媒体配置

假设您已按以下方式配置模型以使用媒体库

use Spatie\MediaLibrary\MediaCollections\Models\Media;

public function registerMediaConversions(Media $media = null): void
{
    $this->addMediaConversion('thumb')
        ->width(130)
        ->height(130);
}

public function registerMediaCollections(): void
{
    $this->addMediaCollection('main')->singleFile();
    $this->addMediaCollection('my_multi_collection');
}

通用文件管理

为了能够上传和处理通用文件，请使用 Files 字段。

use NodyIQ\AdvancedNovaMediaLibrary\Fields\Files;

Files::make('Single file', 'one_file'),
Files::make('Multiple files', 'multiple_files'),

单图上传

use NodyIQ\AdvancedNovaMediaLibrary\Fields\Images;

public function fields(Request $request)
{
    return [
        Images::make('Main image', 'main') // second parameter is the media collection name
            ->conversionOnIndexView('thumb') // conversion used to display the image
            ->rules('required'), // validation rules
    ];
}

多图上传

如果您启用了多文件上传功能，则可以通过拖放对图像进行排序。

use NodyIQ\AdvancedNovaMediaLibrary\Fields\Images;

public function fields(Request $request)
{
    return [
        Images::make('Images', 'my_multi_collection') // second parameter is the media collection name
            ->conversionOnPreview('medium-size') // conversion used to display the "original" image
            ->conversionOnDetailView('thumb') // conversion used on the model's view
            ->conversionOnIndexView('thumb') // conversion used to display the image on the model's index page
            ->conversionOnForm('thumb') // conversion used to display the image on the model's form
            ->fullSize() // full size column
            ->rules('required', 'size:3') // validation rules for the collection of images
            // validation rules for the collection of images
            ->singleImageRules('dimensions:min_width=100'),
    ];
}

选择现有媒体

如果您将相同的媒体文件上传到多个模型，并且不希望再次从文件系统中选择它，请使用此功能。选择已存在的媒体将复制它。

注意：此功能将向您的应用程序的每个用户公开搜索现有媒体。如果您的媒体上传/媒体模型的自定义属性是机密的，请 不要启用此功能！

如果您还没有发布配置文件，请发布它们

artisan vendor:publish --tag=nova-media-library

在配置文件 config/nova-media-library 中启用此功能

return [
    'enable-existing-media' => true,
];

启用现有媒体字段的选项

Images::make('Image')->enableExistingMedia(),

注意：此功能不支持临时URL。

上传图像的名称

新上传文件的默认文件名是原始文件名。您可以使用 setFileName 函数来更改此文件名，它只接受一个回调函数作为参数。此回调函数有三个参数：$originalFilename（原始文件名，如 Fotolia 4711.jpg）、$extension（文件扩展名，如 jpg）、$model（当前模型）。以下是一些您可以做的示例

// Set the filename to the MD5 Hash of original filename
Images::make('Image 1', 'img1')
    ->setFileName(function($originalFilename, $extension, $model){
        return md5($originalFilename) . '.' . $extension;
    });

// Set the filename to the model name
Images::make('Image 2', 'img2')
    ->setFileName(function($originalFilename, $extension, $model){
        return str_slug($model->name) . '.' . $extension;
    });

默认情况下，Media对象的“名称”字段设置为不带扩展名的原始文件名。要更改此设置，您可以使用 setName 函数。与 setFileName 类似，它只接受一个回调函数作为参数。此回调函数有两个参数：$originalFilename 和 $model。

Images::make('Image 1', 'img1')
    ->setName(function($originalFilename, $model){
        return md5($originalFilename);
    });

响应式图像

如果您想使用来自 Spatie MediaLibrary 的响应式图像功能，您可以在模型上使用 withResponsiveImages 函数。

Images::make('Image 1', 'img1')
    ->withResponsiveImages();

图像裁剪

默认情况下，您可以通过在编辑视图的左下角点击剪刀来裁剪/旋转图像。为此目的使用了 vue-js-clipper。裁剪功能仅限于 image/jpg、image/jpeg 和 image/png 的MIME类型。

重要：通过裁剪现有图像，原始媒体模型将被删除，并替换为裁剪后的图像。所有自定义属性将从旧模型复制到新模型。

要禁用此功能，请使用 croppable 方法

Images::make('Gallery')->croppable(false);

您可以设置所有配置，例如比率，如下所示

Images::make('Gallery')->croppingConfigs(['aspectRatio' => 4/3]);

可用的裁剪配置，请参阅 https://github.com/timtnleeProject/vuejs-clipper#clipper-basic。

在上传时可以强制执行裁剪，例如确保图像具有设置的宽高比。

Images::make('Gallery')->mustCrop();

默认禁用裁剪

默认情况下，裁剪功能是启用的。要为所有图像默认禁用裁剪，请在 config/nova-media-library.php 中将 default-croppable 设置为 false

return [
    'default-croppable' => false,
];

自定义属性

Images::make('Gallery')
    ->customPropertiesFields([
        Boolean::make('Active'),
        Markdown::make('Description'),
    ]);

Files::make('Multiple files', 'multiple_files')
    ->customPropertiesFields([
        Boolean::make('Active'),
        Markdown::make('Description'),
    ]);

// custom properties without user input
Files::make('Multiple files', 'multiple_files')
    ->customProperties([
        'foo' => auth()->user()->foo,
        'bar' => $api->getNeededData(),
    ]);

显示图像统计信息（大小、尺寸、类型）

Images::make('Gallery')
    ->showStatistics();

自定义头

Images::make('Gallery')
    ->customHeaders([
        'header-name' => 'header-value',
    ]);

媒体字段（视频）

为了处理带有缩略图的视频，您需要使用 Media 字段而不是 Images。这样您就可以上传视频了。

use NodyIQ\AdvancedNovaMediaLibrary\Fields\Media;

class Category extends Resource
{
    public function fields(Request $request)
    {
        Media::make('Gallery') // media handles videos
            ->conversionOnIndexView('thumb')
            ->singleMediaRules('max:5000'); // max 5000kb
    }
}

// ..

class YourModel extends Model implements HasMedia
{
    public function registerMediaConversions(Media $media = null): void
    {
        $this->addMediaConversion('thumb')
            ->width(368)
            ->height(232)
            ->extractVideoFrameAtSecond(1);
    }
}

临时URL

如果您使用 Amazon S3 存储媒体，则需要使用字段上的 temporary 函数来生成临时签名URL。此函数期望一个有效的 Carbon 实例，该实例将指定 URL 应何时过期。

Images::make('Image 1', 'img1')
    ->temporary(now()->addMinutes(5))

Files::make('Multiple files', 'multiple_files')
    ->temporary(now()->addMinutes(10),

注意：此功能与现有媒体功能不兼容。

致谢

nova 媒体库

替代方案

dmitrybubyakin/nova-medialibrary-field

变更日志

v4.0.2 - 2022-04-26

在 Nova 4 中修复裁剪比例。现在，从 Images::( ... )>croppingConfigs() 传递到裁剪器的 stencil-props 属性。有关可用属性的更多详细信息，请参阅裁剪器文档。

v4.0.1 - 2022-04-20

修复详情组件
修复布局不一致问题

v4.0.0 - 2022-04-18

升级以支持 Laravel Nova 4
与 Laravel Nova 1、2 和 3 不兼容。对于这些 nova 版本，请使用 v3.*
将 vuejs-clipper 替换为 vue-advanced-cropper 以支持 vue3

完整的变更日志在 PR #317 中

如何贡献

当然，您需要在 Laravel 应用中安装 Nova
在 vendor 目录中的包中直接工作（webpack 需要 Nova 已安装）
然后从 vendor/xxx/advanced-nova-media-library 文件夹
- 至少使用 nvm use 14
- yarn install
- yarn run watch
- 努力工作 🤘
- 工作完成后，执行 yarn npm production
- 创建一个 PR

nody-iq / advanced-nova-media-library

维护者

详细信息