037294d62b
- Add disk() and visibility() for Storage integration - Rename gap() to imageGap() to avoid Filament v4 conflict - Add cursor-pointer on image hover - Remove empty text display"
4.2 KiB
4.2 KiB
Filament Image Gallery
A Filament plugin for displaying image galleries with zoom, rotate, flip, and fullscreen capabilities using Viewer.js.
Requirements
| Version | Filament | PHP | Laravel |
|---|---|---|---|
| 2.x | 3.x | 4.x | ^8.2 | ^10.0 | ^11.0 | ^12.0 |
| 1.x | 3.x | ^8.1 | ^10.0 | ^11.0 |
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
Installation
composer require al-saloul/filament-image-gallery
Optionally, publish the config file:
php artisan vendor:publish --tag=image-gallery-config
Usage
Table Column
use Alsaloul\ImageGallery\Tables\Columns\ImageGalleryColumn;
ImageGalleryColumn::make('images')
->getStateUsing(fn ($record) => $record->images->pluck('image')->toArray())
->disk(config('filesystems.default'))
->circle()
->stacked(3)
->ring(2, '#3b82f6')
->limit(3)
->limitedRemainingText(),
Available Methods
| Method | Description | Default |
|---|---|---|
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 |
square(bool) |
Square shape with rounded corners | false |
circle(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" badge for remaining | true |
Infolist Entry
use Alsaloul\ImageGallery\Infolists\Entries\ImageGalleryEntry;
ImageGalleryEntry::make('images')
->disk(config('filesystems.default'))
->thumbWidth(128)
->thumbHeight(128)
->imageGap('gap-4'),
Available Methods
| Method | Description | Default |
|---|---|---|
disk(string) |
Storage disk for images | null |
visibility(string) |
'public' or 'private' |
'public' |
thumbWidth(int) |
Thumbnail width in pixels | 128 |
thumbHeight(int) |
Thumbnail height in pixels | 128 |
imageGap(string) |
Tailwind gap class | 'gap-4' |
rounded(string) |
Tailwind rounded class | 'rounded-lg' |
wrapperClass(string) |
Additional wrapper classes | null |
Blade Component
<x-image-gallery::image-gallery
:images="$model->images"
:thumb-width="150"
:thumb-height="150"
rounded="rounded-xl"
gap="gap-6"
/>
Examples
With Storage Disk
ImageGalleryColumn::make('images')
->disk('s3')
->circle()
->stacked(3)
->limit(3)
// For private files
ImageGalleryColumn::make('images')
->disk('s3')
->visibility('private') // Generates temporary URLs
->limit(3)
Circular Stacked with Ring
ImageGalleryColumn::make('images')
->circle()
->stacked(3)
->ring(2, '#3b82f6')
->limit(3)
Changelog
Please see CHANGELOG for more information.
Credits
License
The MIT License (MIT). Please see License File for more information.