diff --git a/packages/tables/docs/03-columns/04-image.md b/packages/tables/docs/03-columns/04-image.md index 953aa7e5516..f8db2066706 100644 --- a/packages/tables/docs/03-columns/04-image.md +++ b/packages/tables/docs/03-columns/04-image.md @@ -93,6 +93,17 @@ ImageColumn::make('avatar') ->defaultImageUrl(url('/images/placeholder.png')) ``` +## Image Lightbox + +You can display a image lightbox by using `lightbox()`: + +```php +use Filament\Tables\Columns\ImageColumn; + +ImageColumn::make('header_image') + ->lightbox() +``` + ## Stacking images You may display multiple images as a stack of overlapping images by using `stacked()`: diff --git a/packages/tables/resources/views/columns/image-column.blade.php b/packages/tables/resources/views/columns/image-column.blade.php index 817706e32e9..5c8929abc6f 100644 --- a/packages/tables/resources/views/columns/image-column.blade.php +++ b/packages/tables/resources/views/columns/image-column.blade.php @@ -5,6 +5,7 @@ $isCircular = $isCircular(); $isSquare = $isSquare(); $isStacked = $isStacked(); + $hasLightbox = $hasLightBox() ?? false; $overlap = $isStacked ? ($getOverlap() ?? 2) : null; $ring = $isStacked ? ($getRing() ?? 2) : null; $height = $getHeight() ?? ($isStacked ? '2rem' : '2.5rem'); @@ -41,6 +42,7 @@ @endphp
merge($getExtraAttributes(), escape: false) @@ -71,6 +73,7 @@ > @foreach ($limitedState as $stateItem) + +
diff --git a/packages/tables/src/Columns/ImageColumn.php b/packages/tables/src/Columns/ImageColumn.php index 8b2c4bd2c8b..fb62caa81dd 100644 --- a/packages/tables/src/Columns/ImageColumn.php +++ b/packages/tables/src/Columns/ImageColumn.php @@ -50,6 +50,8 @@ class ImageColumn extends Column protected string | Closure | null $limitedRemainingTextSize = null; + protected bool | Closure $lightbox = false; + public function disk(string | Closure | null $disk): static { $this->disk = $disk; @@ -283,6 +285,18 @@ public function getRing(): ?int return $this->evaluate($this->ring); } + public function lightbox(bool | Closure $lightbox = true): static + { + $this->lightbox = $lightbox; + + return $this; + } + + public function hasLightBox(): ?bool + { + return $this->evaluate($this->lightbox); + } + public function limit(int | Closure | null $limit = 3): static { $this->limit = $limit;