Tool and Field for Laravel Nova that will let you managing files and add them to the posts.
- Features
- Migration from 0.1 to 0.2
- Requirements
- Install
- Configuration
- Usage
- Customization
- Upload by url
- Localization
- Screenshots
- Store and manage your media files
- Use field as single image
- Use field as gallery
- Use field as list
- Upload files by url
- Integrate Media Field with Trix editor
- Implement a custom callback with the field
- Automatic resize image on the backend by width\height
- Cropping image on the frontend
In version 0.2, the configuration file and database migration have been changed.
After upgrading to version 0.2+, you need to remove the old table from the database, then reinstall and reconfigure these files.
- Laravel 5.8+
- Nova 2
- intervention/image package for image resizing (optional)
composer require classic-o/nova-media-library
php artisan vendor:publish --provider="ClassicO\NovaMediaLibrary\ToolServiceProvider"
php artisan migrate
php artisan storage:linkFor more information and examples see the configuration file
# config/media-library.php
return [
# Filesystem disk. Available `public` or `s3`.
"disk" => "s3" == env("FILESYSTEM_DRIVER") ? "s3" : "public",
# Will use to return base url of media file.
"url" => "s3" == env("FILESYSTEM_DRIVER") ? env("AWS_URL", "") : env("APP_URL", "") . "/storage",
# Save all files in a separate folder
"folder" => "uploads",
# Organize uploads into date based folders.
"by_date" => null,
# This option allow you to filter your files by types and extensions.
"types" => [
"Image" => [ "jpg", "jpeg", "png", "gif", "svg" ],
"Docs" => [ "doc", "xls", "docx", "xlsx" ],
"Audio" => [ "mp3" ],
"Video" => [ "mp4" ],
"Other" => [ "*" ],
],
# Maximum size of file uploads in bytes for each types.
"max_size" => [
"Image" => 2097152,
"Docs" => 5242880,
],
# The number of files that will be returned with each step.
"step" => 40,
# Allow you to resize images by width\height. Using http://image.intervention.io library
"resize" => [
"image" => "Image",
"width" => 1200,
"height" => null,
"driver" => "gd",
"quality" => 80,
"crop" => true,
]
];Add the below to the tools function in app/Providers/NovaServiceProvider.php
public function tools()
{
return [
new \ClassicO\NovaMediaLibrary\NovaMediaLibrary(),
];
}Add Field to the resource.
use ClassicO\NovaMediaLibrary\MediaField;
class Post extends Resource
{
...
public function fields(Request $request)
{
return [
...
MediaField::make("Image"),
...
];
}
...
}By default, this field is used as single image. If you need to set the field as a listing, add a method:
# Display as a gallery
MediaField::make("Gallery")
->listing(),
# Display by line
MediaField::make("Listing")
->listing("line"),When you use a listing, set the casts as array to needed column in model and type TEXT in database
If you want to hide the listing under the accordion, add the following method
MediaField::make("Gallery")
->listing()
->isHidden()You can limit the selection of files by type (Labels of types from configuration file).
MediaField::make("Image")
->withTypes(["Image", "Video"])You can also integrate the media button with the Trix editor.
You need to set a unique name in the forTrix method and add an additional attribute with the same name in the Trix field:
MediaField::make("For Trix", null)
->forTrix("unique_trix_name"),
Trix::make("Content")
->withMeta([ "extraAttributes" => [ "trix-nml" => "unique_trix_name" ] ])If you need to set a custom callback for the media button, use the method jsCallback.
- The first parameter you specified as the name of the JS function callback.
- The second (optional) is an array of advanced settings
MediaField::make("With Callback", null)
->jsCallback("callback_name", [ "name" => "Nova" ]),Your JavaScript callback should have 2 parameters. The first will be an array of files, second - your settings.
function callback_name(array, settings) {
console.log(array, settings);
}Also you can programmatically add files to the media library by url or path.
use \ClassicO\NovaMediaLibrary\API;
$result = API::upload("https://pay.google.com/about/static/images/social/og_image.jpg");If an error occurred while loading, the function will return an error string.
If all is well - true
If you enabled resizing and the image was successfully loaded, but for some reason the script could not cut off the image - they will return null
To translate this tool another language, you need to add the translation file /resources/lang/vendor/nova-media-library/{lang}/messages.php by adding phrases from message.php
