All Features
Gallery System
Image and video galleries with lightbox and multiple layouts
Overview
Complete gallery management system for images and videos. Supports multiple layout modes (grid, masonry, carousel, lightbox), YouTube/Vimeo embedding, optional albums, lazy loading, and GLightbox integration. Perfect for portfolios, photo albums, and media showcases.
Design Considerations
UX patterns and visual design notes for this feature:
- •Image aspect ratios matter - offer options (1:1, 4:3, 16:9, auto)
- •Lazy loading is essential for performance with large galleries
- •Lightbox should support keyboard navigation and touch gestures
- •Masonry layouts need proper column balancing on mobile
- •Video thumbnails need play icons to set expectations
Key Benefits
What makes this feature stand out:
- ✓4 layout modes (grid, masonry, carousel, lightbox)
- ✓YouTube & Vimeo video support with thumbnails
- ✓GLightbox with zoom, download, and share
- ✓Album organization with slugs
- ✓Lazy loading for performance
- ✓Responsive with mobile-optimized layouts
GalleryWidget accepts images from multiple sources: direct array, File IDs, entity attachments, or gallery albums. GLightbox library handles lightbox functionality. Use GalleryHelper for image normalization and data retrieval.
Helpers
GalleryHelperModels
GalleryGalleryItemFileEntityAttachmentDatabase Tables
gallerygallery_itemfileentity_attachmentConfiguration
Config Relationship Legend
params.php Configuration
Config path: params['gallery']
params['features']['gallery'] => trueparams['gallery']['lightbox']['enabled'] => trueparams['gallery']['lightbox']['loop'] => trueparams['gallery']['lightbox']['zoomable'] => trueparams['gallery']['lightbox']['draggable'] => trueparams['gallery']['lightbox']['slideEffect'] => 'fade'params['gallery']['showCaptions'] => trueparams['gallery']['lazyLoad'] => trueparams['gallery']['showDownload'] => falseparams['gallery']['animation']['enabled'] => trueparams['gallery']['animation']['default'] => 'fade-up'Database Settings (system_setting table)
| Key | Type | Description | Relation |
|---|---|---|---|
gallery_lightbox_enabled | boolean | Enable lightbox globally | ⚙ |
gallery_default_layout | string | Default gallery layout | ⚙ |