Documentation

• Filament Spatie Media Library Croppie Plugin
  • Installation
  • License
  • Acknowldgements
  • Changelog

#Filament Spatie Media Library Croppie Plugin

#Installation

You can install the package via composer and don't forget to install croppie itself, if you have not done so already:

composer require josefbehr/filament-spatie-media-library-croppie
npm install croppie

To use outside filament (e.g. with just the forms package), add the js and css to your vite (or mix) config:

@vite([
    'vendor/josefbehr/filament-spatie-media-library-croppie/resources/dist/js/filament-spatie-media-library-croppie.js',
    'vendor/josefbehr/filament-spatie-media-library-croppie/resources/dist/css/filament-spatie-media-library-croppie.css',
    ...
])

This field extends and therefore has all the functionality of the Filament Spatie Media Library Plugin field.

SpatieMediaLibraryCroppie::make('image')
    ->boundaryWidth('100%')
    ->boundaryHeight('600'),

Use boundaryWidth and boundaryHeight to set width and height of the image area in the modal. The values above are the defaults.

SpatieMediaLibraryCroppie::make('image')
    ->viewportWidth('400')
    ->viewportHeight('400'),

Use viewportWidth and viewportHeight to set width and height of the cropper itself. Values above are the defaults.

SpatieMediaLibraryCroppie::make('image')
    ->showZoomer(),

showZoomer can be called to show the zoom bar below the image in the modal.

SpatieMediaLibraryCroppie::make('avatar')
    ->avatar(),

We can make croppie circular using avatar method.

Croppie::make('background')
    ->modalSize('6xl')
    ->modalHeading("Crop Background Image")

Modal size can be customized using modalSize method. For setting the heading use modalHeading.

#License

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

#Acknowldgements

This started as a fork of nuhel/FilamentCroppie, extended and adapted to use spatie/media-library and install croppie via npm.

#Changelog

2023-03-16

• fork nuhel/filament-croppie and rename everything, extend spatie plugin form filed
• remove croppie css and js and re-import them from node_modules
• add viewportWidth/Height and boundaryWidth/Height methods