PHPackages al-saloul/filament-image-gallery - 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. al-saloul/filament-image-gallery ActiveLibrary[Image & Media](/categories/media) al-saloul/filament-image-gallery ================================ A Filament plugin for displaying image galleries with zoom, rotate, and flip capabilities v3.0.0(3mo ago)408.4k↑63%7[2 PRs](https://github.com/al-saloul/filament-image-gallery/pulls)MITPHPPHP ^8.2 Since Dec 11Pushed 3mo ago2 watchersCompare [ Source](https://github.com/al-saloul/filament-image-gallery)[ Packagist](https://packagist.org/packages/al-saloul/filament-image-gallery)[ Docs](https://github.com/al-saloul/filament-image-gallery)[ RSS](/packages/al-saloul-filament-image-gallery/feed)WikiDiscussions main Synced 1mo ago READMEChangelogDependencies (11)Versions (15)Used By (0) [![filament-image-gallery](https://raw.githubusercontent.com/al-saloul/images/refs/heads/main/filament-image-gallery.png)](https://raw.githubusercontent.com/al-saloul/images/refs/heads/main/filament-image-gallery.png) Filament Image Gallery ====================== [](#filament-image-gallery) [![Latest Version on Packagist](https://camo.githubusercontent.com/199ff8ee2b6d3694a35c0364c999b60ac1b7b8148afd07539815c4bfd0ea9bec/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f762f616c2d73616c6f756c2f66696c616d656e742d696d6167652d67616c6c6572792e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/al-saloul/filament-image-gallery)[![Total Downloads](https://camo.githubusercontent.com/41377b78bcf245b664554c01926fdabb06ad046db29da0734bcd1261e76857aa/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f64742f616c2d73616c6f756c2f66696c616d656e742d696d6167652d67616c6c6572792e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/al-saloul/filament-image-gallery) A Filament plugin for displaying image galleries with zoom, rotate, flip, and fullscreen capabilities using [Viewer.js](https://fengyuanchen.github.io/viewerjs/). Demo ---- [](#demo) [![filament-image-gallery](https://raw.githubusercontent.com/al-saloul/images/refs/heads/main/filament-image-gallery.gif)](https://raw.githubusercontent.com/al-saloul/images/refs/heads/main/filament-image-gallery.gif) Screenshots ----------- [](#screenshots) ### Table Column [](#table-column) ThumbnailsGallery Viewer[![Table Column - Thumbnails](https://raw.githubusercontent.com/al-saloul/images/refs/heads/main/onClickTable.jpg)](https://raw.githubusercontent.com/al-saloul/images/refs/heads/main/onClickTable.jpg)[![Table Column - Gallery Viewer](https://raw.githubusercontent.com/al-saloul/images/refs/heads/main/aferClickTable.png)](https://raw.githubusercontent.com/al-saloul/images/refs/heads/main/aferClickTable.png)### Infolist Entry [](#infolist-entry) ThumbnailsGallery Viewer[![Infolist Entry - Thumbnails](https://raw.githubusercontent.com/al-saloul/images/refs/heads/main/onClickInfolist.jpg)](https://raw.githubusercontent.com/al-saloul/images/refs/heads/main/onClickInfolist.jpg)[![Infolist Entry - Gallery Viewer](https://raw.githubusercontent.com/al-saloul/images/refs/heads/main/aferClicknfolist.png)](https://raw.githubusercontent.com/al-saloul/images/refs/heads/main/aferClicknfolist.png)--- Requirements ------------ [](#requirements) VersionFilamentPHPLaravel3.x3.x | 4.x | 5.x^8.2^10.0 | ^11.0 | ^12.02.x3.x | 4.x^8.2^10.0 | ^11.0 | ^12.01.x3.x^8.1^10.0 | ^11.0Features -------- [](#features) - 📊 **Table Column** - Display image galleries in table rows with stacked thumbnails - 📋 **Infolist Entry** - Show image galleries in infolists with horizontal scrolling - 🧩 **Blade Component** - Use standalone in any Blade view - 🔍 **Viewer.js Integration** - Zoom, rotate, flip, and fullscreen image viewing - 💾 **Storage Disk Support** - Works with any Laravel filesystem disk - 🌙 **Dark Mode Support** - Works seamlessly with dark mode - 🌐 **RTL Support** - Full right-to-left language support - ⚡ **SPA Mode Compatible** - Works seamlessly with Filament's `spa()` mode without page reload Installation ------------ [](#installation) ``` composer require al-saloul/filament-image-gallery ``` Quick Usage ----------- [](#quick-usage) You can use the `imageGallery()` method on any standard Filament `ImageColumn` or `ImageEntry` to enable the gallery viewer. ### Table Column [](#table-column-1) ``` use Filament\Tables\Columns\ImageColumn; ImageColumn::make('images') ->circular() ->stacked() ->limit(3) ->overlap(4) ->remainingTextBadge(true) ->imageGallery() // Enables the gallery viewer ``` ### Infolist Entry [](#infolist-entry-1) ``` use Filament\Infolists\Components\ImageEntry; ImageEntry::make('images') ->imageGallery() // Enables the gallery viewer ``` Usage ----- [](#usage) ### Table Column [](#table-column-2) ``` use Alsaloul\ImageGallery\Tables\Columns\ImageGalleryColumn; ImageGalleryColumn::make('images') ->getStateUsing(fn ($record) => $record->images->pluck('image')->toArray()) ->disk(config('filesystems.default')) ->visibility('private') // if private generate temporary url ->circular() ->stacked(2) ->ring(1, '#fff') ->limit(3) ->remainingTextBadge(true) ->limitedRemainingText(), ``` #### Available Methods [](#available-methods) MethodDescriptionDefault`disk(string)`Storage disk for images`null``visibility(string)``'public'` or `'private'` (for temporary URLs)`'public'``thumbWidth(int)`Thumbnail width in pixels`40``thumbHeight(int)`Thumbnail height in pixels`40``limit(int|null)`Maximum images to show`3``stacked(int|bool)`Stack thumbnails. Pass `int` for custom spacing`false``overlap(int)`Set overlap value for stacked images (0-8)`2``square(bool)`Square shape with rounded corners`false``circular(bool)`Circular shape`false``ring(int, string)`Border ring with width and color`1, null``ringColor(string)`Set ring color separately`null``limitedRemainingText(bool)`Show "+N" text for remaining images`true``remainingTextBadge(bool)`Whether to show remaining text as a badge (true) or plain text (false)`false`--- ### Infolist Entry [](#infolist-entry-2) ``` use Alsaloul\ImageGallery\Infolists\Entries\ImageGalleryEntry; ImageGalleryEntry::make('images') ->disk(config('filesystems.default')) ->visibility('private') // if private generate temporary url ->thumbWidth(128) ->thumbHeight(128) ->imageGap('gap-4'), ``` #### Available Methods [](#available-methods-1) MethodDescriptionDefault`disk(string)`Storage disk for images`null``visibility(string)``'public'` or `'private'``'public'``thumbWidth(int)`Thumbnail width in pixels`null` (natural size)`thumbHeight(int)`Thumbnail height in pixels`null` (natural size)`imageGap(string)`Tailwind gap class`'gap-4'``rounded(string)`Tailwind rounded class`'rounded-lg'``wrapperClass(string)`Additional wrapper classes`null`--- ### Blade Component [](#blade-component) ``` ``` --- Examples -------- [](#examples) ### With Storage Disk [](#with-storage-disk) ``` ImageGalleryColumn::make('images') ->disk('s3') ->circular() ->stacked(3) ->limit(3) // For private files ImageGalleryColumn::make('images') ->disk('s3') ->visibility('private') // Generates temporary URLs ->limit(3) ``` ### Circular Stacked with Ring [](#circular-stacked-with-ring) ``` ImageGalleryColumn::make('images') ->circular() ->stacked() ->overlap(3) // Control overlap spacing (0-8) ->ring(2, '#3b82f6') ->limit(3) // Or use shorthand: stacked(3) sets both stacked=true and overlap=3 ImageGalleryColumn::make('images') ->circular() ->stacked(3) ->limit(3) ->remainingTextBadge() // Show as a Filament badge ``` ### Remaining Text Customization [](#remaining-text-customization) ``` ImageGalleryColumn::make('images') ->limit(3) ->limitedRemainingText(true) // Show the "+N" text ->remainingTextBadge(true) // Format as a badge (default is plain text) ``` ### Natural Size (No Thumbnail Dimensions) [](#natural-size-no-thumbnail-dimensions) ``` // Images display at their natural size ImageGalleryEntry::make('images') ->disk(config('filesystems.default')) ->imageGap('gap-4'), ``` --- Configuration (Optional) ------------------------ [](#configuration-optional) Optionally, publish the config file: ``` php artisan vendor:publish --tag=image-gallery-config ``` --- Changelog --------- [](#changelog) Please see [CHANGELOG](CHANGELOG.md) for more information. Credits ------- [](#credits) - [Mohammed Alsaloul](https://github.com/al-saloul) - [Husam Almiyah](https://github.com/Husam-Almiyah) - [Viewer.js](https://fengyuanchen.github.io/viewerjs/) License ------- [](#license) The MIT License (MIT). Please see [License File](LICENSE.md) for more information. ### Health Score 50 — FairBetter than 96% of packages Maintenance78 Regular maintenance activity Popularity40 Moderate usage in the ecosystem Community16 Small or concentrated contributor base Maturity55 Maturing project, gaining track record Bus Factor1 Top contributor holds 88.6% 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 ~3 days Recently: every ~10 days Total 14 Last Release 118d ago Major Versions v1.0.0 → v2.0.02025-12-11 v2.1.4 → v3.0.02026-01-20 PHP version history (2 changes)v1.0.0PHP ^8.1 v2.0.0PHP ^8.2 ### Community Maintainers ![](https://www.gravatar.com/avatar/bda733a21c23751cd06e6fb66499e827cade8340b351874dd7469eefc6f6d9f5?d=identicon)[Husam-Almiyah](/maintainers/Husam-Almiyah) ![](https://www.gravatar.com/avatar/0a2776dd1dd2c91f8bac075de5cd7c2e9fb7f987083d643c4e3373724b27f542?d=identicon)[al-saloul](/maintainers/al-saloul) --- Top Contributors [![al-saloul](https://avatars.githubusercontent.com/u/96193006?v=4)](https://github.com/al-saloul "al-saloul (31 commits)")[![ekvedaras](https://avatars.githubusercontent.com/u/3586184?v=4)](https://github.com/ekvedaras "ekvedaras (2 commits)")[![Husam-Almiyah](https://avatars.githubusercontent.com/u/121790274?v=4)](https://github.com/Husam-Almiyah "Husam-Almiyah (2 commits)") --- Tags laravelimage galleryslideshowlightboxrotateflipfilamentViewerzoomphoto-galleryimage-previewal-saloulimage-viewerimage-navigationimage-rotateflip-imagemirror-imageimage-sliderfullscreen-viewnext-prevgallery-controls ### Code Quality TestsPest Code StyleLaravel Pint ### Embed Badge ![Health badge](/badges/al-saloul-filament-image-gallery/health.svg) ``` [![Health](https://phpackages.com/badges/al-saloul-filament-image-gallery/health.svg)](https://phpackages.com/packages/al-saloul-filament-image-gallery) ``` ### Alternatives [awcodes/filament-curator A media picker plugin for FilamentPHP. 434297.7k19](/packages/awcodes-filament-curator)[solution-forest/filament-simplelightbox This is my package filament-simplelightbox 6281.0k1](/packages/solution-forest-filament-simplelightbox)[joshembling/image-optimizer Optimize your Filament images before they reach your database. 111145.4k12](/packages/joshembling-image-optimizer)[joaopaulolndev/filament-pdf-viewer Filament package to show pdf document viewer 104147.2k3](/packages/joaopaulolndev-filament-pdf-viewer)[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)[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) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)