al-saloul/filament-image-gallery

A Filament plugin for displaying image galleries with zoom, rotate, and flip capabilities

v2.1.2 2025-12-13 00:51 UTC

Requires

• php: ^8.2
• filament/filament: ^3.0 || ^4.0
• filament/forms: ^3.0 || ^4.0
• filament/infolists: ^3.0 || ^4.0
• filament/tables: ^3.0 || ^4.0
• spatie/laravel-package-tools: ^1.15.0

Requires (Dev)

• laravel/pint: ^1.0
• nunomaduro/collision: ^7.9 || ^8.0
• orchestra/testbench: ^8.0 || ^9.0 || ^10.0
• pestphp/pest: ^2.1 || ^3.0
• pestphp/pest-plugin-arch: ^2.0 || ^3.0
• pestphp/pest-plugin-laravel: ^2.0 || ^3.0

MIT

• Al-Saloul

• laravel
• rotate
• lightbox
• slideshow
• zoom
• Viewer
• flip
• filament
• image-gallery
• photo-gallery
• image-preview
• al-saloul
• image-viewer
• image-navigation
• image-rotate
• flip-image
• mirror-image
• image-slider
• fullscreen-view
• next-prev
• gallery-controls

README

Filament Image Gallery

A Filament plugin for displaying image galleries with zoom, rotate, flip, and fullscreen capabilities using Viewer.js.

Demo

Screenshots

Table Column

Thumbnails	Gallery Viewer

Infolist Entry

Thumbnails	Gallery Viewer

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

Quick Usage

You can use the imageGallery() method on any standard Filament ImageColumn or ImageEntry to enable the gallery viewer.

Table Column

use Filament\Tables\Columns\ImageColumn;

ImageColumn::make('images')
    ->circular()
    ->stacked()
    ->limit(3)
    ->imageGallery() // Enables the gallery viewer

Infolist Entry

use Filament\Infolists\Components\ImageEntry;

ImageEntry::make('images')
    ->imageGallery() // Enables the gallery viewer

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	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

<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)

Natural Size (No Thumbnail Dimensions)

// Images display at their natural size
ImageGalleryEntry::make('images')
    ->disk(config('filesystems.default'))
    ->imageGap('gap-4'),

Configuration (Optional)

Optionally, publish the config file:

php artisan vendor:publish --tag=image-gallery-config

Changelog

Please see CHANGELOG for more information.

Credits

• Mohammed Alsaloul
• Husam Almiyah
• Viewer.js

License

The MIT License (MIT). Please see License File for more information.