Gallery

Gallery widget displays a collection of images in a responsive grid layout with adaptive columns and modal view for detailed inspection.

Demo

Rows:

Mountain Landscape

2.4 MB

Mountain Landscape

2.4 MB

Mountain Landscape

2.4 MB

Mountain Landscape

2.4 MB

Mountain Landscape

2.4 MB

Mountain Landscape

2.4 MB

Usage

<GalleryWidget :items="galleryItems" />

interface GalleryWidgetProps {
  items: FileItem[]
  columns?: number
  maxHeight?: number
}

interface FileItem {
  id: string
  entityId: string
  entityType: 'post' | 'file' | 'product' | 'custom'
  name: string
  path: string
  size: number
  type: string
  author: string
  description?: string
  keywords?: string[]
  version: number
  status: 'active' | 'inactive' | 'deleted'
  createdAt: Date
  updatedAt?: Date
}

Key features:

• Responsive grid layout with adaptive columns based on screen size
• Click-to-expand modal view with full-size image display
• File information overlay (name, size, date)
• Download and share functionality
• Hover effects and smooth transitions
• Supports various image formats and sizes

Common use cases:

• Photo galleries and portfolios
• Media libraries and asset management
• Product image collections
• Document preview systems
• Social media content displays