michielkempen/advanced-nova-media-library

Laravel Nova 用于管理 Spatie 媒体库的工具。

2.10 2020-03-08 16:04 UTC

README

管理spatie的媒体库包中的图像。可以上传多张图像并通过拖放排序。

目录

示例

Cropping Single image upload Multiple image upload Custom properties Generic file management

安装

composer require ebess/advanced-nova-media-library
php artisan vendor:publish --tag=nova-media-library

模型媒体配置

假设您已配置模型使用媒体库如下

use Spatie\MediaLibrary\Models\Media;

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

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

通用文件管理

Generic file management

要能够上传和处理通用文件,请使用 Files 字段。

use Ebess\AdvancedNovaMediaLibrary\Fields\Files;

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

单张图像上传

Single image upload

use Ebess\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
    ];
}

多张图像上传

如果您启用了多文件上传功能,您可以通过 拖放 来排序图像。

Multiple image upload

use Ebess\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'),
    ];
}

选择现有媒体

Selecting existing media Selecting existing media 2

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

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

  • 如果尚未发布配置文件,请发布它们
artisan vendor:publish --tag=nova-media-library
  • 在配置文件 config/nova-media-library 中启用此功能
return [
    'enable-existing-media' => true,
];
  • 启用现有媒体字段的选择
Images::make('Image')->enableExistingMedia(),

上传图像名称

新上传文件的默认文件名为原始文件名。您可以使用 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;
    });

默认情况下,媒体对象上的 "name" 字段设置为不带扩展名的原始文件名。要更改此设置,您可以使用 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();

图像裁剪

Cropping

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

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

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

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

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

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

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

自定义属性

Custom properties

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(),
    ]);

显示图像尺寸

Image dimensions

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

自定义头部

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

媒体字段(视频)

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

use Ebess\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)
    {
        $this->addMediaConversion('thumb')
            ->width(368)
            ->height(232)
            ->extractVideoFrameAtSecond(1);
    }
}

致谢

替代方案