README

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.

marshmallow / nova-advanced-image

Maintainers

Package info

Statistics

Security

README

Nova Advanced Image Field

Requirements

Installation

Usage

Available methods

Avatar variant

Security

Changelog

Credits

License