Documentation
#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
