Image Column

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

string | Closure

The storage disk name.

Visibility

By default, Filament generates temporary URLs for images. For public images:

ImageColumn::make('header_image')
    ->visibility('public')

string | Closure

The visibility setting (‘public’ or ‘private’).

Customizing the size

You can set image dimensions:

Width
Height
Both

ImageColumn::make('header_image')
    ->imageWidth(200)

ImageColumn::make('header_image')
    ->imageHeight(50)

ImageColumn::make('avatar')
    ->imageSize(40)

int | string | Closure

The image width in pixels or a CSS value.

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

bool | Closure

default:"true"

Whether to display as square.

Circular images

Make images fully rounded (useful for avatars):

ImageColumn::make('avatar')
    ->imageHeight(40)
    ->circular()

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

string | Closure

The URL of the default image.

Stacking images

Display multiple images as overlapping stack:

ImageColumn::make('colleagues.avatar')
    ->imageHeight(40)
    ->circular()
    ->stacked()

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)

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)

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)

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

bool | Closure

default:"true"

Whether to display the remaining count.

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)

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

array | Closure

An array of HTML attributes.

bool

default:"false"

Whether to merge with existing attributes.

Form Components

Table Components

Layout Components

Infolist Components

Introduction

Managing the disk

Visibility

Customizing the size

Square images

Circular images

Default image

Stacking images

Customizing the ring

Customizing the overlap

Limiting images

Showing remaining count

File existence checks

Wrapping images

Extra image attributes

​Introduction

​Managing the disk

​Visibility

​Customizing the size

​Square images

​Circular images

​Default image

​Stacking images

​Customizing the ring

​Customizing the overlap

​Limiting images

​Showing remaining count

​File existence checks

​Wrapping images

​Extra image attributes

Introduction

Managing the disk

Visibility

Customizing the size

Square images

Circular images

Default image

Stacking images

Customizing the ring

Customizing the overlap

Limiting images

Showing remaining count

File existence checks

Wrapping images

Extra image attributes