Nova Advanced Image Field

An advanced image field for Nova with crop and resize.

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

• PHP ^8.0
• Laravel Nova ^4.0 or ^5.0
• Intervention Image ^3.6

Intervention Image requires one of the following libraries for image processing:

• GD Library >=2.0 (used by default)
• Imagick PHP extension >=6.5.7

See the Intervention requirements for more details. The autoOrientate() helper additionally requires the PHP exif extension to be enabled.

Installation

Install the package into a Laravel application with Nova using Composer:

composer require marshmallow/nova-advanced-image

The field service provider is auto-discovered, so there is nothing further to register.

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. You can also override the driver per field with ->driver('imagick').

Usage

AdvancedImage extends Nova's Image field, so you can use any method that Image/File implements. See the Nova file field documentation for the inherited options.

<?php

namespace App\Nova;

// ...
use Marshmallow\AdvancedImage\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),

            // Auto-rotate based on the image's Exif orientation (requires the exif extension)
            AdvancedImage::make('photo')->autoOrientate(),

            // Override the image processing driver for this field only ('gd' or 'imagick')
            AdvancedImage::make('photo')->driver('imagick')->croppable(),

            // Store to AWS S3
            AdvancedImage::make('photo')->disk('s3'),

            // Specify a custom subdirectory
            AdvancedImage::make('photo')->disk('s3')->path('image'),
        ];
    }
}

The resize option uses Intervention Image resize() with the upsize and aspect ratio constraints.

Available methods

Method	Description
croppable($param = true)	Enable the crop box. Pass a numeric value (e.g. 16 / 9) to lock a fixed aspect ratio.
resize($width = null, $height = null)	Resize the stored image to a maximum width and/or height.
driver(string $driver)	Override the Intervention driver for this field. Accepts gd or imagick.
autoOrientate()	Rotate the image to the orientation stored in its Exif data. Requires the PHP exif extension.
customThumbnail($callable)	Customise the thumbnail URL resolver (proxies Nova's thumbnail()).
customPreview($callable)	Customise the preview URL resolver (proxies Nova's preview()).
setCustomCallback($customCallback)	Run a custom callback after the image has been stored.

Avatar variant

For avatar-style fields, use AdvancedAvatar. It extends AdvancedImage, implements Nova's Cover contract and renders a rounded thumbnail.

use Marshmallow\AdvancedImage\AdvancedAvatar;

AdvancedAvatar::make('avatar')->croppable(1),

Security

If you discover any security related issues, please email stef@marshmallow.dev instead of using the issue tracker.

Changelog

Please see CHANGELOG for recent changes.

Credits

• Marshmallow
• Clément Tessier (original author)
• All Contributors

License

The MIT License (MIT). Please see the License File for more information.