takdw / nova-advanced-image-field
An advanced image field for Nova with crop and resize.
Requires
- php: >=7.1.0
- intervention/image: ^2.5
This package is auto-updated.
Last update: 2024-05-04 15:53:28 UTC
README
This package provides an advanced image field for Nova resources allowing you to upload, crop and resize any image.
It uses Cropper.js with vue-cropperjs in the frontend and Intervention Image in the backend.
Requirements
To work correctly, this package requires the following components:
- Laravel & Nova (2 or 3)
- Fileinfo Extension
And one of the following libraries:
- GD Library >=2.0 (used by default)
- Imagick PHP extension >=6.5.7
See Intervention requirements for more details.
Installation
Install the package into a Laravel application with Nova using Composer:
composer require ctessier/nova-advanced-image-field
If you want to use Imagick as the default image processing library, follow the Intervention documentation for Laravel. This will provide you with a new configuration file where you can specify the driver you want.
Usage
AdvancedImage
extends from Image
so you can use any methods that Image
implements. See the documentation here.
<?php namespace App\Nova; // ... use Illuminate\Http\Request; use Ctessier\NovaAdvancedImageField\AdvancedImage; class Post extends Resource { // ... public function fields(Request $request) { return [ // ... // Simple image upload AdvancedImage::make('Photo'), // Show a cropbox with a free ratio AdvancedImage::make('Photo')->croppable(), // Show a cropbox with a fixed ratio AdvancedImage::make('Photo')->croppable(16/9), // Resize the image to a max width AdvancedImage::make('Photo')->resize(1920), // Resize the image to a max height AdvancedImage::make('Photo')->resize(null, 1080), // Show a cropbox and resize the image AdvancedImage::make('Photo')->croppable()->resize(400, 300), // Override the image processing driver for this field only AdvancedImage::make('Photo')->driver('imagick')->croppable(), // Store to AWS S3 AdvancedImage::make('Photo')->disk('s3'), // Specify a custom subdirectory AdvancedImage::make('Photo')->croppable()->disk('s3')->path('image'), // Store custom attributes AdvancedImage::make('Photo')->croppable()->store(function (Request $request, $model) { return [ 'photo' => $request->photo->store('/', 's3'), 'photo_mime' => $request->photo->getMimeType(), 'photo_name' => $request->photo->getClientOriginalName(), ]; }), ]; } }
The resize
option uses Intervention Image resize()
with the upsize and aspect ratio constraints.