Skip to main content

​
Introduction

Image columns display images based on the file path in the column’s state: 
use Filament\Tables\Columns\ImageColumn;

ImageColumn::make('avatar')
The state can contain a relative path (relative to the storage disk) or an absolute URL.

​
Managing the disk

By default, images are stored on the disk defined in your Filament configuration. You can customize the disk: 
ImageColumn::make('header_image')
    ->disk('s3')
​
disk
string | Closure
The storage disk name.

​
Visibility

By default, Filament generates temporary URLs for images. For public images: 
ImageColumn::make('header_image')
    ->visibility('public')
​
visibility
string | Closure
The visibility setting (‘public’ or ‘private’).

​
Customizing the size

You can set image dimensions: 
ImageColumn::make('header_image')
    ->imageWidth(200)
​
width
int | string | Closure
The image width in pixels or a CSS value.
​
height
int | string | Closure
The image height in pixels or a CSS value.

​
Square images

Display images with a 1:1 aspect ratio: 
ImageColumn::make('avatar')
    ->imageHeight(40)
    ->square()
​
condition
bool | Closure
default:"true"
Whether to display as square.

​
Circular images

Make images fully rounded (useful for avatars): 
ImageColumn::make('avatar')
    ->imageHeight(40)
    ->circular()
​
condition
bool | Closure
default:"true"
Whether to display as circular.

​
Default image

Display a placeholder when no image exists: 
ImageColumn::make('header_image')
    ->defaultImageUrl(url('storage/posts/header-images/default.jpg'))
​
url
string | Closure
The URL of the default image.

​
Stacking images

Display multiple images as overlapping stack: 
ImageColumn::make('colleagues.avatar')
    ->imageHeight(40)
    ->circular()
    ->stacked()
​
condition
bool | Closure
default:"true"
Whether to stack multiple images.

​
Customizing the ring

The ring width around stacked images: 
ImageColumn::make('colleagues.avatar')
    ->imageHeight(40)
    ->circular()
    ->stacked()
    ->ring(5)
​
ring
int | Closure
default:"3"
The ring width (0-8).

​
Customizing the overlap

The overlap between stacked images: 
ImageColumn::make('colleagues.avatar')
    ->imageHeight(40)
    ->circular()
    ->stacked()
    ->overlap(2)
​
overlap
int | Closure
default:"4"
The overlap amount (0-8).

​
Limiting images

Limit the maximum number of images displayed: 
ImageColumn::make('colleagues.avatar')
    ->imageHeight(40)
    ->circular()
    ->stacked()
    ->limit(3)
​
limit
int | Closure
default:"3"
The maximum number of images to display.

​
Showing remaining count

Display the count of remaining images: 
ImageColumn::make('colleagues.avatar')
    ->imageHeight(40)
    ->circular()
    ->stacked()
    ->limit(3)
    ->limitedRemainingText()
​
condition
bool | Closure
default:"true"
Whether to display the remaining count.
​
size
TextSize | string | Closure
default:"TextSize::Small"
The size of the remaining text.

​
File existence checks

By default, Filament checks if images exist. Disable for remote storage: 
ImageColumn::make('attachment')
    ->checkFileExistence(false)
​
condition
bool | Closure
default:"true"
Whether to check if files exist.

​
Wrapping images

Allow images to wrap to multiple lines: 
ImageColumn::make('colleagues.avatar')
    ->circular()
    ->stacked()
    ->wrap()

​
Extra image attributes

Add HTML attributes to the <img> element: 
ImageColumn::make('logo')
    ->extraImgAttributes([
        'alt' => 'Logo',
        'loading' => 'lazy',
    ])
​
attributes
array | Closure
An array of HTML attributes.
​
merge
bool
default:"false"
Whether to merge with existing attributes.

Build docs developers (and LLMs) love

Get started for freeTalk to us