al-saloul/filament-image-gallery

A Filament plugin for displaying image galleries with zoom, rotate, and flip capabilities
6,864 40
laravel viewer zoom rotate filament lightbox slideshow flip 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
Install
composer require al-saloul/filament-image-gallery
Latest Version:v3.0.0
PHP:^8.2
Maintainer: Husam-Almiyah

filament-image-gallery

Filament Image Gallery

Latest Version on Packagist Total Downloads

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

Demo

filament-image-gallery

Screenshots

Table Column

Thumbnails Gallery Viewer
Table Column - Thumbnails Table Column - Gallery Viewer

Infolist Entry

Thumbnails Gallery Viewer
Infolist Entry - Thumbnails Infolist Entry - Gallery Viewer

Requirements

Version Filament PHP Laravel
3.x 3.x | 4.x | 5.x ^8.2 ^10.0 | ^11.0 | ^12.0
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
  • ⚡ 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

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

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

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

License

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