Skip to content
Jefferson Gonçalves
← Back to projects

Filament Stacked Image Column

Display multiple images as a stack in your Filament tables

#Stacked Image Column for Filament

Stacked Image Column allows you to display multiple images as a stack in your Filament tables.

#Screenshots

stacked

stacked-dark

#Installation

You can install the package via composer:

composer require archilex/filament-stacked-image-column

Optionally, you can publish the views using

php artisan vendor:publish --tag="filament-stacked-image-column-views"

#Usage

Normally you will use Stacked Image Column to show a relationship of images. The name of the relationship comes first, followed by a period, followed by the name of the column to display:

use Archilex\StackedImageColumn\Columns\StackedImageColumn;

return $table
    ->columns([
        StackedImageColumn::make('orderItems.image'),
    ]);

#Using a separator

Instead of using a relationship, you may use a separated string by passing the separator into separator():

StackedImageColumn::make('product_images')
    ->separator(',')

#Customizing the images

As StackedImageColumn extends Filament's ImageColumn, you have access to most of the same methods:

StackedImageColumn::make('images')
    ->circular()
    ->width(20)

#Setting a limit

You may set a limit to the number of images you want to display by passing limit():

StackedImageColumn::make('orderItems.image')
    ->circular()
    ->limit(3)

#Showing the remaining images count

When you set a limit you may also display the count of remaining images by passing showRemaining().

StackedImageColumn::make('orderItems.image')
    ->circular()
    ->limit(3)
    ->showRemaining()

By default, showRemaining() will display the count of remaining images as a number stacked on the other images. If you prefer to show the count as a number after the images you may use showRemainingAfterStack(). You may also set the text size by using remainingTextSize('xs');

#Customizing the ring width

The default ring width is ring-3 but you may customize the ring width to be either 0, 1, 2, or 4 which correspond to tailwinds ring-widths: ring-0, ring-1, ring-2, and ring-4 respectively.

StackedImageColumn::make('users.avatar')
    ->circular()
    ->ring(3)

#Customizing the overlap

The default overlap is -space-x-1 but you may customize the overlap to be either 0, 1, 2, 3, or 4 which correspond to tailwinds space-x options: space-x-0, -space-x-1, -space-x-2, -space-x-3, and -space-x-4 respectively.

StackedImageColumn::make('users.avatar')
    ->circular()
    ->overlap(3)

#Testing

composer test

#Changelog

Please see CHANGELOG for more information on what has changed recently.

#Contributing

Please see CONTRIBUTING for details.

#Security Vulnerabilities

Please review our security policy on how to report security vulnerabilities.

#Credits

#Other Filament Plugins

Check out my other Filament Plugins:

  • Filter Sets: Save your filters, search query, column order, and column search queries into easily accessible filter sets
  • Toggle Icon Column: Display a toggleable icon in your Filament table.

#License

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

New version available.