Widget Demos
UI Components
Marketing
Content Display
Navigation
Notifications
Visual Effects
Interactive
Layout
Content Display
Gallery Widget
Display images and videos in beautiful layouts with lightbox support. Supports grid, masonry, carousel, and lightbox-only layouts. Includes lazy loading, aspect ratio control, and video playback.
Grid Layout
Responsive grid with equal-height images.
Code
<?php echo GalleryWidget::widget([
'images' => ['/img/1.jpg', '/img/2.jpg', '/img/3.jpg'],
'layout' => 'grid',
'columns' => 4,
'lightboxEnabled' => true,
]); ?>Live Demo
Masonry Layout
Pinterest-style masonry grid with natural heights.
Code
<?php echo GalleryWidget::widget([
'images' => [...],
'layout' => 'masonry',
'columns' => 3,
]); ?>Live Demo
Carousel
Bootstrap carousel with automatic slideshow.
Code
<?php echo GalleryWidget::widget([
'images' => [...],
'layout' => 'carousel',
'autoplay' => true,
]); ?>Live Demo
Lightbox with Captions
Thumbnail grid with captions and lightbox.
Code
<?php echo GalleryWidget::widget([
'images' => [
['url' => '/img/1.jpg', 'caption' => 'Caption 1'],
['url' => '/img/2.jpg', 'caption' => 'Caption 2'],
],
'layout' => 'lightbox',
'showCaptions' => true,
]); ?>Live Demo
Configuration Options
| Option | Type | Default | Description |
|---|---|---|---|
images | array | null | Array of image URLs or data arrays |
fileIds | array | null | Array of File model IDs |
entityType | string | null | Entity type for EntityAttachment lookup |
entityId | int | null | Entity ID for attachments |
gallerySlug | string | null | Gallery album slug |
layout | string | grid | Layout: grid, masonry, carousel, lightbox |
columns | int | 4 | Number of columns (2-6) |
aspectRatio | string | 4:3 | Aspect ratio: 1:1, 4:3, 16:9, 3:2, auto |
lightboxEnabled | bool | true | Enable lightbox on click |
showCaptions | bool | false | Show image captions |
lazyLoad | bool | true | Enable lazy loading |