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

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

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'))
    ->circular()
    ->stacked(3)
    ->ring(2, '#3b82f6')
    ->limit(3)
    ->limitedRemainingText(),

Available Methods

Infolist Entry

use Alsaloul\ImageGallery\Infolists\Entries\ImageGalleryEntry;

ImageGalleryEntry::make('images')
    ->disk(config('filesystems.default'))
    ->thumbWidth(128)
    ->thumbHeight(128)
    ->imageGap('gap-4'),

Available Methods

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')
    ->circular()
    ->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')
    ->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)

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.