PHPackages michaeld555/filament-croppie - PHPackages - PHPackages [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register) 1. [Directory](/) 2. / 3. [Image & Media](/categories/media) 4. / 5. michaeld555/filament-croppie ActiveLibrary[Image & Media](/categories/media) michaeld555/filament-croppie ============================ Croppie Js Implementation Field for Filament forms v1.0.4(1y ago)123.1k↓21.4%2[4 issues](https://github.com/michaeld555/filament-croppie/issues)MITBladePHP ^8.1 Since Nov 13Pushed 1y ago1 watchersCompare [ Source](https://github.com/michaeld555/filament-croppie)[ Packagist](https://packagist.org/packages/michaeld555/filament-croppie)[ Docs](https://github.com/michaeld555/filament-croppie)[ RSS](/packages/michaeld555-filament-croppie/feed)WikiDiscussions master Synced 1mo ago READMEChangelog (5)Dependencies (8)Versions (6)Used By (0) Filament Croppie - Documentation ================================ [](#filament-croppie---documentation) [![Latest Version on Packagist](https://camo.githubusercontent.com/fe03bef19644a7609d243e0f0ca9569f85c09ae45efa0a6e2a36fb997a6acec2/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f762f6d69636861656c643535352f66696c616d656e742d63726f707069652e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/michaeld555/filament-croppie)[![Total Downloads](https://camo.githubusercontent.com/ea46bf52d5b483e1542a455fab0c6cdf287c9def41f40588861c79cc1ad14281/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f64742f6d69636861656c643535352f66696c616d656e742d63726f707069652e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/michaeld555/filament-croppie) This package provides an image cropping component for FilamentPHP, using the Croppie.js library. It allows users to interactively crop images before uploading, offering flexible configuration options to control the crop size, aspect ratio, and format. [![filament croppie](./art/filament-croppie.png)](./art/filament-croppie.png) Installation ------------ [](#installation) ``` composer require michaeld555/filament-croppie ``` After installation, you'll be prompted to publish the configuration file and translations. It's recommended to publish the configuration file to customize the default options. ``` php artisan vendor:publish --tag="filament-croppie-config" ``` You can also run the install command to publish the config and translations ``` php artisan filament-croppie:install ``` Configuration ------------- [](#configuration) The configuration file `config/filament-croppie.php` allows you to customize the behavior of the Croppie modal. The available options are: OptionDescriptionDefault Value`title`Modal title.'Manage Image'`description`Modal description.'Crop the image to the correct proportion'`icon`Modal icon (optional).`null``size`Modal size (e.g., `sm`, `md`, `lg`, `xl`, `2xl`, `3xl`, `4xl`, etc.).`4xl``boundary-height`Height of the crop boundary area.`400``boundary-width`Width of the crop boundary area.`600``viewport-height`Height of the visible crop area (viewport).`200``viewport-width`Width of the visible crop area (viewport).`200``enable-resize`Enables resizing of the viewport.`false``enable-zoom`Enables zooming on the image.`true``show-zoomer`Shows the zoom control.`true``viewport-type`Type of viewport (`circle` or `square`).`circle`Usage ----- [](#usage) To use the Croppie component in a Filament form, simply instantiate the `Michaeld555\FilamentCroppie\Components\Croppie` component: ``` use Michaeld555\FilamentCroppie\Components\Croppie; Croppie::make('avatar') ->label('Avatar') // Field label ->disk('public') // Storage disk ->directory('avatars') // Storage directory // ... other configuration options ``` ### Examples [](#examples) #### Basic Usage with Custom Upload Path [](#basic-usage-with-custom-upload-path) ``` Croppie::make('profile_picture') ->label('Profile Picture') ->disk('s3') ->directory('profile-images') ->imageResizeTargetWidth(400) ->imageResizeTargetHeight(400); ``` #### Circular Crop (Avatar) with Larger Modal [](#circular-crop-avatar-with-larger-modal) ``` Croppie::make('user_avatar') ->avatar() ->modalSize('5xl') ->modalDescription('Please upload a square image for optimal results.'); ``` [![Screenshot of basic croppie](./art/croppie-basic.png)](./art/croppie-basic.png) #### Square Crop with Custom Viewport Size and Zoom Disabled [](#square-crop-with-custom-viewport-size-and-zoom-disabled) ``` Croppie::make('product_image') ->viewportType('square') ->viewportHeight(250) ->viewportWidth(250) ->enableZoom(false) ->imageFormat('webp'); ``` [![Screenshot of basic croppie](./art/croppie-square.png)](./art/croppie-square.png) ### Croppie Component Methods [](#croppie-component-methods) - **`modalTitle(string | Closure | null $modalTitle)`**: Sets the modal title. - **`modalDescription(string | Closure | null $modalDescription)`**: Sets the modal description. - **`modalIcon(string | Closure | null $modalIcon)`**: Sets the modal icon. - **`modalSize(string | Closure | null $modalSize)`**: Sets the modal size. - **`customClasses(string | Closure | null $customClasses)`**: Sets custom CSS classes for the Croppie container. - **`enableOrientation(bool | Closure | null $enableOrientation)`**: Enables/disables image orientation detection. - **`enableResize(bool | Closure | null $enableResize)`**: Enables/disables viewport resizing. - **`enableZoom(bool | Closure | null $enableZoom)`**: Enables/disables zoom on the image. - **`enforceBoundary(bool | Closure | null $enforceBoundary)`**: Sets whether the image should be forced to stay within the defined boundary. - **`mouseWheelZoom(bool | Closure | string $mouseWheelZoom)`**: Sets the mouse wheel zoom behavior (`true`, `false`, or `'ctrl'`). - **`showZoomer(bool | Closure | null $showZoomer)`**: Sets whether the zoom control should be displayed. - **`forceCircleResult(bool | Closure | null $forceCircleResult)`**: Sets whether the crop result should be forced to a circle. - **`viewportType(string | Closure | null $viewportType)`**: Sets the viewport type (`'circle'` or `'square'`). - **`viewportHeight(string | Closure | null $viewportHeight)`**: Sets the viewport height. - **`viewportWidth(string | Closure | null $viewportWidth)`**: Sets the viewport width. - **`boundaryHeight(string | Closure | null $boundaryHeight)`**: Sets the boundary height. - **`boundaryWidth(string | Closure | null $boundaryWidth)`**: Sets the boundary width. - **`imageFormat(string | Closure | null $imageFormat)`**: Sets the resulting image format (e.g., 'png', 'jpeg', 'webp'). - **`imageSize(string | Closure | null $imageSize)`**: Sets the resulting image size (`'viewport'` or `'original'`). - **`imageName(string | Closure | null $imageName)`**: Allows customizing the image name. By default, a UUID is used. Changelog --------- [](#changelog) Please see [CHANGELOG](CHANGELOG.md) for more information on what has changed recently. Credits ------- [](#credits) - [Michael Douglas](https://github.com/michaeld555) - [All Contributors](../../contributors) License ------- [](#license) The MIT License (MIT). Please see [License File](LICENSE.md) for more information. ### Health Score 35 — LowBetter than 80% of packages Maintenance38 Infrequent updates — may be unmaintained Popularity29 Limited adoption so far Community12 Small or concentrated contributor base Maturity51 Maturing project, gaining track record Bus Factor1 Top contributor holds 66.7% of commits — single point of failure How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window. **Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores. **Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement. **Maturity (30%)** — Project age, version count, PHP version support, and release stability. ### Release Activity Cadence Every ~32 days Total 5 Last Release 424d ago ### Community Maintainers ![](https://www.gravatar.com/avatar/468ac93c5d3d72f0574d393b2582b56059fcc1cf48f564e63717a685f19d8b50?d=identicon)[michaeld555](/maintainers/michaeld555) --- Top Contributors [![michaeld555](https://avatars.githubusercontent.com/u/97418627?v=4)](https://github.com/michaeld555 "michaeld555 (8 commits)")[![yhaefliger](https://avatars.githubusercontent.com/u/472352?v=4)](https://github.com/yhaefliger "yhaefliger (2 commits)")[![yhaefligsib](https://avatars.githubusercontent.com/u/118164920?v=4)](https://github.com/yhaefligsib "yhaefligsib (2 commits)") --- Tags imageimage resizefieldfilamentcroppiecropperjsmichaeld555croppie-imagecroppie-image-resizecroppie-js ### Code Quality Static AnalysisPHPStan Code StyleLaravel Pint ### Embed Badge ![Health badge](/badges/michaeld555-filament-croppie/health.svg) ``` [![Health](https://phpackages.com/badges/michaeld555-filament-croppie/health.svg)](https://phpackages.com/packages/michaeld555-filament-croppie) ``` ### Alternatives [awcodes/filament-curator A media picker plugin for FilamentPHP. 434297.7k19](/packages/awcodes-filament-curator)[joshembling/image-optimizer Optimize your Filament images before they reach your database. 111145.4k12](/packages/joshembling-image-optimizer)[danihidayatx/image-optimizer Optimize your Filament images before they reach your database. Forked from joshembling/image-optimizer for Filament v4 & v5 support. 254.4k](/packages/danihidayatx-image-optimizer)[ctessier/nova-advanced-image-field An advanced image field for Nova with cropping and resizing. 103548.4k1](/packages/ctessier-nova-advanced-image-field)[schmeits/filament-character-counter This is a Filament character counter TextField and Textarea form field for Filament v4 and v5 33184.7k6](/packages/schmeits-filament-character-counter)[novadaemon/filament-pretty-json Read-only field to show pretty json in your filamentphp forms 44359.2k2](/packages/novadaemon-filament-pretty-json) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)