Image Gallery

• Demo
• Screenshots
  • Table Column
  • Infolist Entry
• Requirements
• Features
• Installation
• Quick Usage
  • Table Column
  • Infolist Entry
• Usage
  • Table Column
    • Available Methods
  • Infolist Entry
    • Available Methods
  • Blade Component
• Examples
  • With Storage Disk
  • Circular Stacked with Ring
  • Remaining Text Customization
  • Natural Size (No Thumbnail Dimensions)
• Configuration (Optional)
• Changelog
• Credits
• License

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)
    ->overlap(4)
    ->remainingTextBadge(true)
    ->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'))
    ->visibility('private') // if private generate temporary url
    ->circular()
    ->stacked(2)
    ->ring(1, '#fff')
    ->limit(3)
    ->remainingTextBadge(true)
    ->limitedRemainingText(),

#Available Methods

#Infolist Entry

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

#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)
    ->remainingTextBadge() // Show as a Filament badge

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

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