在线时间:8:00-16:00
迪恩网络APP
随时随地掌握行业动态
扫描二维码
关注迪恩网络微信公众号
开源软件名称(OpenSource Name):ebess/advanced-nova-media-library开源软件地址(OpenSource Url):https://github.com/ebess/advanced-nova-media-library开源编程语言(OpenSource Language):Vue 60.4%开源软件介绍(OpenSource Introduction):Laravel Advanced Nova Media LibraryManage images of spatie's media library package. Upload multiple images and order them by drag and drop. Table of Contents
ExamplesInstallcomposer require ebess/advanced-nova-media-library php artisan vendor:publish --tag=nova-media-library Model media configurationLet's assume you configured your model to use the media library like following: 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');
} Generic file managementIn order to be able to upload and handle generic files just go ahead and use the use Ebess\AdvancedNovaMediaLibrary\Fields\Files;
Files::make('Single file', 'one_file'),
Files::make('Multiple files', 'multiple_files'), Single image uploaduse 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 uploadIf you enable the multiple upload ability, you can order the images via drag & drop. 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 mediaIf you upload the same media files to multiple models and you do not want to select it from the file system all over again, use this feature. Selecting an already existing media will copy it. Attention: This feature will expose an endpoint to every user of your application to search existing media. If your media upload / custom properties on the media models are confidential, do not enable this feature!
artisan vendor:publish --tag=nova-media-library
return [
'enable-existing-media' => true,
];
Images::make('Image')->enableExistingMedia(), Note: This feature does not support temporary URLs. Names of uploaded imagesThe default filename of the new uploaded file is the original filename. You can change this with the help of the function // 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;
}); By default, the "name" field on the Media object is set to the original filename without the extension. To change this, you can use the Images::make('Image 1', 'img1')
->setName(function($originalFilename, $model){
return md5($originalFilename);
}); Responsive imagesIf you want to use responsive image functionality from the Spatie MediaLibrary, you can use the Images::make('Image 1', 'img1')
->withResponsiveImages(); Image croppingBy default you are able to crop / rotate images by clicking the scissors in the left bottom corner on the edit view.
The vue-js-clipper is used for this purpose. The cropping feature is
limited to mime type of Important: By cropping an existing image the original media model is deleted and replaced by the cropped image. All custom properties are copied form the old to the new model. To disable this feature use the Images::make('Gallery')->croppable(false); You can set all configurations like ratio e.g. as following: Images::make('Gallery')->croppingConfigs(['aspectRatio' => 4/3]); Available cropping configuration, see https://github.com/timtnleeProject/vuejs-clipper#clipper-basic. It is possible to enforce cropping on upload, for example to ensure the image has the set aspect ratio: Images::make('Gallery')->mustCrop(); Custom propertiesImages::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(),
]); Show image statistics (size, dimensions, type)Images::make('Gallery')
->showStatistics(); Custom headersImages::make('Gallery')
->customHeaders([
'header-name' => 'header-value',
]); Media Field (Video)In order to handle videos with thumbnails you need to use the 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): void
{
$this->addMediaConversion('thumb')
->width(368)
->height(232)
->extractVideoFrameAtSecond(1);
}
} Temporary UrlsIf you are using Amazon S3 to store your media, you will need to use the
Note: This feature does not work with the existing media feature. CreditsAlternativesChange logv4.0.2 - 2022-04-26
v4.0.1 - 2022-04-20
v4.0.0 - 2022-04-18
Full change log in PR #317 |
2023-10-27
2022-08-15
2022-08-17
2022-09-23
2022-08-13
请发表评论