josefbehr / filament-spatie-media-library-croppie
A filament form field for image upload using spatie media library and croppie.js
Installs: 5 422
Dependents: 0
Suggesters: 0
Security: 0
Stars: 11
Watchers: 0
Forks: 7
Language:Blade
Requires
- php: ^8.0
- filament/spatie-laravel-media-library-plugin: ^2.0
- spatie/laravel-medialibrary: ^10
README
Installation
You can install the package via composer (no need to install croppie as well as its assets are bundled):
composer require josefbehr/filament-spatie-media-library-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 avater
method.
Croppie::make('background') ->modalSize('6xl') ->modalHeading("Crop Background Image")
Modal size can be customized using modalSize
method.
For setting the heading use modalHeading
.
Set image quality and format
If your cropped images are very large (see: [Foliotek/Croppie#444]), you can use the imageFormat()
and imageQuality()
methods to modify the resulting image.
SpatieMediaLibraryCroppie::make('image') ->imageFormat('jpeg') ->imageQuality(0.7);
Defaults are:
imageQuality(0.9)
imageFormat('png')
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
v1.0.4
- add imageFormat and imageQuality options/methods
v1.0.3
- re-bundle croppie assets with plugin assets as it does not seem to work otherwise in some cases
v1.0.0
- 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