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.


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.


When editing, selected images display in a card layout with the caption underneath, drag images to reorder.


Three column sizes, square thumbs, gutter, class attribute. Lightbox controls and animation.

Lighthouse for this page


Please turn on javascript

1) Lighthouse

Mobile Desktop
Performance 97 100
Accessibility 100 100
Best Practices 100 100
SEO 100 100