Nova Advanced Image Field

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.