Gallery Block
A gallery display of image thumbnails with lightbox for that bigger picture.
Gallery with default columns
The gallery uses css columns, this means that the thumbnails will fill and balance based on columns. For the gallery underneath the lightbox uses the scale animation and displays all optional controls.
Gallery with square thumbnails
The square thumbnails uses css flex for a row based layout. This gallery uses the large columns setting. All controls have been disabled and the animation is set to fade.
Gallery with portrait and landscape thumbnails
In order to balance columns, portrait and landscape images are cropped to a 3:2 ratio. Square images are just resized. Be aware though when your ‘square’ image is not exactly the same height and width; it will be cropped.
Gallery
The preview in the Panel doesn’t always correspond with the front end, because of a different column width. The lightbox is for the front end only.
Content
When editing, selected images display in a card layout with the caption underneath, drag images to reorder.
Settings
Three column sizes, square thumbs, gutter, class attribute. Lightbox controls and animation.
Lighthouse for this page
Tooltips
Please turn on javascript
1) Lighthouse
| Mobile | Desktop | |
|---|---|---|
| Performance | 97 | 100 |
| Accessibility | 100 | 100 |
| Best Practices | 100 | 100 |
| SEO | 100 | 100 |