Filament HUB
Hero background

Image Entry

Transform how you display images in your info lists with powerful rendering capabilities that go far beyond basic image display. From elegant stacked avatar galleries to secure private image handling, Filament's ImageEntry component provides sophisticated tools for showcasing visual content with responsive sizing, circular styling, and intelligent overflow management that automatically adapts to your data structure.

# Image Entry

Image Entry

Display images effortlessly by providing either a storage path relative to your disk or an absolute URL. The component automatically handles image loading and provides graceful fallback when images are unavailable, making it perfect for user-generated content and dynamic media galleries.

// Using absolute URLs
ImageEntry::make('external_logo')
    ->state('https://picsum.photos/id/40/367/267'),

ImageEntry::make('image')
    ->label('Profile Photo'),

# Custom sizing options

Custom sizing options

Precisely control image dimensions using flexible sizing methods that maintain image quality while fitting your layout perfectly. Choose between fixed dimensions, proportional scaling, or unified sizing to create consistent visual hierarchies across your interface.

ImageEntry::make('image')
    ->label('Image width & height')
    ->imageWidth(200)
    ->imageHeight(150),

ImageEntry::make('image')
    ->label('Image size')
    ->imageSize(200),

ImageEntry::make('image')
    ->label('Image height')
    ->imageHeight(300),

# Circular images for avatars

Circular images for avatars

Transform rectangular images into elegant circular displays perfect for user avatars, team member photos, and profile imagery. The circular styling automatically centers and crops images while maintaining crisp edges and proper proportions.

ImageEntry::make('image')
    ->imageSize(200)
    ->circular(),

# Stacked image galleries

Stacked image galleries

Create compelling visual stories by overlapping multiple images in an elegant stacked layout. Perfect for showcasing team members, product variations, or gallery previews while conserving space and creating visual depth through overlapping elements.

ImageEntry::make('images')
    ->label('Images gallery')
    ->imageSize(70)
    ->circular()
    ->stacked(),

ImageEntry::make('images')
    ->label('Limited images gallery')
    ->imageSize(70)
    ->circular()
    ->stacked()
    ->limit(3)
    ->limitedRemainingText(),