PHPackages outerweb/filament-image-library - 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. outerweb/filament-image-library ActiveLibrary[Image & Media](/categories/media) outerweb/filament-image-library =============================== Filament integration for the outerweb/image-library package v3.3.1(2mo ago)2411.5k↓42.6%4[3 PRs](https://github.com/outer-web/filament-image-library/pulls)MITPHPPHP ^8.4CI passing Since Feb 27Pushed 2mo agoCompare [ Source](https://github.com/outer-web/filament-image-library)[ Packagist](https://packagist.org/packages/outerweb/filament-image-library)[ Docs](https://github.com/outer-web/filament-image-library)[ GitHub Sponsors](https://github.com/outer-web)[ RSS](/packages/outerweb-filament-image-library/feed)WikiDiscussions main Synced 1mo ago READMEChangelogDependencies (28)Versions (36)Used By (0) [![Filament Image Library](./docs/images/github-banner.png)](./docs/images/github-banner.png) Filament Image Library ====================== [](#filament-image-library) [![Latest Version on Packagist](https://camo.githubusercontent.com/b132d12b67d1feef746ef7c681b8cbd1a4d08d9a63ef3862fc1fd653c6aa884c/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f762f6f757465727765622f66696c616d656e742d696d6167652d6c6962726172792e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/outerweb/filament-image-library)[![GitHub Tests Action Status](https://camo.githubusercontent.com/a6b48b2e50148e2fe657355152ca211e630d3c7fc846e2b69223ca8414c15293/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f616374696f6e732f776f726b666c6f772f7374617475732f6f757465727765622f66696c616d656e742d696d6167652d6c6962726172792f72756e2d74657374732e796d6c3f6272616e63683d6d61696e266c6162656c3d7465737473267374796c653d666c61742d737175617265)](https://github.com/outer-web/filament-image-library/actions?query=workflow%3Arun-tests+branch%3Amain)[![GitHub Code Style Action Status](https://camo.githubusercontent.com/66481a3413d2a68a2ff9fde6dbe94faa6e765978abe43a210d9c5be2fcdb32a2/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f616374696f6e732f776f726b666c6f772f7374617475732f6f757465727765622f66696c616d656e742d696d6167652d6c6962726172792f6669782d7068702d636f64652d7374796c652d6973737565732e796d6c3f6272616e63683d6d61696e266c6162656c3d636f64652532307374796c65267374796c653d666c61742d737175617265)](https://github.com/outer-web/filament-image-library/actions?query=workflow%3A%22Fix+PHP+code+style+issues%22+branch%3Amain)[![Total Downloads](https://camo.githubusercontent.com/befbc5128d35340755b2dd47e531d6382dea13ef5536125e5c21fd829c2f2791/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f64742f6f757465727765622f66696c616d656e742d696d6167652d6c6962726172792e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/outerweb/filament-image-library) This Filament plugin provides an integration for the [outerweb/image-library](https://github.com/outer-web/image-library) package. > ⚠️ **Caution:** V3 uses the `image-library: ^3.0` which is a complete rewrite of the package. Please make sure to follow the [migration steps](https://github.com/outer-web/image-library/blob/main/docs/upgrade-to-v3.md) if you are upgrading from v2 to v3. Table of Contents ----------------- [](#table-of-contents) - [Installation](#installation) - [Configuration](#configuration) - [Usage](#usage) - [Changelog](#changelog) - [License](#license) Installation ------------ [](#installation) You can install the package via composer: ``` composer require outerweb/filament-image-library ``` Be sure to follow the [README](https://github.com/outer-web/image-library/blob/main/README.md) of the `outerweb/image-library` package to set up the package correctly. Add the plugin to your panel: ``` use Outerweb\FilamentImageLibrary\ImageLibraryPlugin; public function panel(Panel $panel): Panel { return $panel // ... ->plugins([ // ... ImageLibraryPlugin::make(), ]); } ``` Add the following to your **[custom theme](https://filamentphp.com/docs/4.x/styling/overview#creating-a-custom-theme)** css file to ensure proper styling of the image library components: ``` @source '../../../../vendor/outerweb/filament-image-library/resources/views/**/*'; ``` Configuration ------------- [](#configuration) ### Access control [](#access-control) You can manage access to the Image Library page by providing a Closure to the `canAccess` method: ``` use App\Models\User; use Outerweb\FilamentImageLibrary\ImageLibraryPlugin; ImageLibraryPlugin::make() ->canAccess(function (User $user): bool { // Your logic here }), ``` ### Navigation group [](#navigation-group) You can set a navigation group for the Image Library page by using the `navigationGroup` method: ``` use Outerweb\FilamentImageLibrary\ImageLibraryPlugin; ImageLibraryPlugin::make() ->navigationGroup('Media Management'), ``` ### Navigation icon [](#navigation-icon) You can set a custom navigation icon for the Image Library page by using the `navigationIcon` method: ``` use Outerweb\FilamentImageLibrary\ImageLibraryPlugin; ImageLibraryPlugin::make() ->navigationIcon('heroicon-o-photograph'), ``` ### Navigation sort [](#navigation-sort) You can set the navigation sort order for the Image Library page by using the `navigationSort` method: ``` use Outerweb\FilamentImageLibrary\ImageLibraryPlugin; ImageLibraryPlugin::make() ->navigationSort(3), ``` ### Disks [](#disks) You can specify which filesystems disks the Image Library should use and display by using the `disks` method: ``` use Outerweb\FilamentImageLibrary\ImageLibraryPlugin; ImageLibraryPlugin::make() ->disks(['public', 's3']), ``` You can provide an associative array to customize the labels of the disks: ``` use Outerweb\FilamentImageLibrary\ImageLibraryPlugin; ImageLibraryPlugin::make() ->disks([ 'public' => 'Local Storage', 's3' => 'Amazon S3', ]), ``` ### Restricting allowed upload file size [](#restricting-allowed-upload-file-size) You can restrict the maximum allowed upload file size (in kilobytes) globally by using the `minUploadFileSize` and `maxUploadFileSize` methods: ``` use Outerweb\FilamentImageLibrary\ImageLibraryPlugin; ImageLibraryPlugin::make() ->minUploadFileSize(100) // Minimum file size of 100 KB ->maxUploadFileSize(5120), // Maximum file size of 5 MB ``` Usage ----- [](#usage) Be sure to follow the [README](https://github.com/outer-web/image-library/blob/main/README.md) of the `outerweb/image-library` package to set up the package correctly. ### Forms [](#forms) You can use the `ImagePicker` form component to allow users to: - select images from the Image Library - upload new images to the Image Library - remove selected images - edit image details - crop the image ``` use Outerweb\FilamentImageLibrary\Forms\Components\ImagePicker; ImagePicker::make('images') ->imageContext('article_image'), ``` The name of the form field (`images` in the example above) needs to correspond to the relationship name on your model that defines the relation to the images. Note: The `imageContext()` method is required. More about it below. #### Image context(s) [](#image-contexts) The image library requires each use of an image to be assigned to an image context. This allows you to define different image processing rules for different use cases. More about image contexts can be found in the [outerweb/image-library documentation](https://github.com/outer-web/image-library/blob/main/README.md). You can assign a single image context like this: ``` use Outerweb\FilamentImageLibrary\Forms\Components\ImagePicker; ImagePicker::make('images') ->imageContext('article_image'), ``` If you want to allow users to select/upload images for multiple image contexts, you can provide an array of contexts like this: ``` use Outerweb\FilamentImageLibrary\Forms\Components\ImagePicker; ImagePicker::make('images') ->imageContext(['thumbnail', 'banner', 'gallery']), ``` All selected images will be stored for each defined context. The modal to edit/crop images will render a tab for each context. #### Modifying the query used to fetch images [](#modifying-the-query-used-to-fetch-images) You can modify the query that is used to fetch images from the Image Library by providing a Closure to the `modifyQueryUsing` method: ``` use Illuminate\Database\Eloquent\Builder; use Illuminate\Database\Eloquent\Model; use Outerweb\FilamentImageLibrary\Forms\Components\ImagePicker; ImagePicker::make('images') ->modifyQueryUsing(function (Builder $query, Model $record, string $relationshipName): Builder { return $query->whereJson('custom_properties->layout_block_type', 'article'); }), ``` #### Disable sorting [](#disable-sorting) By default, the `ImagePicker` component allows users to sort the selected images via drag & drop. You can disable this functionality like this: ``` use Outerweb\FilamentImageLibrary\Forms\Components\ImagePicker; // Using a bool ImagePicker::make('images') ->sortable(false), // Using a Closure ImagePicker::make('images') ->sortable(fn (): bool => false), ``` #### Working with custom properties [](#working-with-custom-properties) If you would like the user to be able to edit custom properties of the selected images, you can define them like this: ``` use Outerweb\FilamentImageLibrary\Forms\Components\ImagePicker; ImagePicker::make('images') ->customPropertiesSchema([ TextInput::make('alt_text') ->label('Alt Text') ->required(), TextInput::make('caption') ->label('Caption'), ]), ``` This will render the defined fields in the edit modal of each selected image. They will automatically be saved to the `custom_properties` column of the image. #### Validation [](#validation) You can add validation rules to the `ImagePicker` component like any other Filament form component: ``` use Outerweb\FilamentImageLibrary\Forms\Components\ImagePicker; ImagePicker::make('images') ->imageContext('article_image') ->required(), ``` You can also use the `minItems` and `maxItems` methods to restrict the number of selected images: ``` use Outerweb\FilamentImageLibrary\Forms\Components\ImagePicker; ImagePicker::make('images') ->imageContext('article_image') ->minItems(1) ->maxItems(5), ``` Note that the `maxItems` method will be overridden if the context only allows a single image. ### Infolists [](#infolists) You can use the `ImageEntry` infolist entry to display the selected images in an infolist: ``` use Outerweb\FilamentImageLibrary\Infolists\Entries\ImageEntry; ImageEntry::make('images'); ``` The name of the form field (`images` in the example above) needs to correspond to the relationship name on your model that defines the relation to the images. #### Modifying the query used to fetch images [](#modifying-the-query-used-to-fetch-images-1) You can modify the query that is used to fetch images from the Image Library by providing a Closure to the `modifyQueryUsing` method: ``` use Illuminate\Database\Eloquent\Builder; use Illuminate\Database\Eloquent\Model; use Outerweb\FilamentImageLibrary\Infolists\Entries\ImageEntry; ImageEntry::make('images'); ->modifyQueryUsing(function (Builder $query, Model $record, string $relationshipName): Builder { return $query->whereJson('custom_properties->layout_block_type', 'article'); }), ``` Changelog --------- [](#changelog) Please see [CHANGELOG](CHANGELOG.md) for more information on what has changed recently. License ------- [](#license) The MIT License (MIT). Please see [License File](LICENSE.md) for more information. ### Health Score 55 — FairBetter than 98% of packages Maintenance87 Actively maintained with recent releases Popularity35 Limited adoption so far Community14 Small or concentrated contributor base Maturity70 Established project with proven stability Bus Factor1 Top contributor holds 87.8% 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 ~24 days Recently: every ~17 days Total 32 Last Release 62d ago Major Versions v1.5.0 → v2.0.02024-03-09 v2.7.0 → v3.0.02025-12-22 PHP version history (2 changes)v1.0.0PHP ^8.0 v3.0.0PHP ^8.4 ### Community Maintainers ![](https://www.gravatar.com/avatar/d5a072b1191f02ac21a84af067a579b6f3323da7e45197369a7540f98c152407?d=identicon)[outerweb.be](/maintainers/outerweb.be) --- Top Contributors [![SimonBroekaert](https://avatars.githubusercontent.com/u/35606498?v=4)](https://github.com/SimonBroekaert "SimonBroekaert (43 commits)")[![KaramNassar](https://avatars.githubusercontent.com/u/43961632?v=4)](https://github.com/KaramNassar "KaramNassar (2 commits)")[![Nuhel](https://avatars.githubusercontent.com/u/30118433?v=4)](https://github.com/Nuhel "Nuhel (2 commits)")[![dependabot[bot]](https://avatars.githubusercontent.com/in/29110?v=4)](https://github.com/dependabot[bot] "dependabot[bot] (1 commits)")[![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?v=4)](https://github.com/github-actions[bot] "github-actions[bot] (1 commits)") --- Tags laravelOuterwebfilament-image-library ### Code Quality TestsPest Static AnalysisPHPStan Code StyleLaravel Pint ### Embed Badge ![Health badge](/badges/outerweb-filament-image-library/health.svg) ``` [![Health](https://phpackages.com/badges/outerweb-filament-image-library/health.svg)](https://phpackages.com/packages/outerweb-filament-image-library) ``` ### Alternatives [awcodes/filament-curator A media picker plugin for FilamentPHP. 434297.7k19](/packages/awcodes-filament-curator)[joaopaulolndev/filament-pdf-viewer Filament package to show pdf document viewer 104147.2k3](/packages/joaopaulolndev-filament-pdf-viewer)[johncarter/filament-focal-point-picker An image focal point picker for Filament Admin. 4326.5k1](/packages/johncarter-filament-focal-point-picker)[saasykit/laravel-open-graphy An awesome open graph image (social cards) generator package for Laravel. 13057.0k](/packages/saasykit-laravel-open-graphy)[outerweb/filament-settings Filament integration for the outerweb/settings package 3690.9k4](/packages/outerweb-filament-settings)[outerweb/filament-translatable-fields Filament integration for spatie/laravel-translatable 3582.9k8](/packages/outerweb-filament-translatable-fields) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)