Gallery Options

The gallery can accept up to 97 images. The wide image at the top is optional and automatically adjusts to span all the columns.
The lightbox slideshow can be set to open fullscreen on clicking a thumbnail image. The thumbnails are layed out using the CSS Grid Layout Module so the number of items per row and item spacing can easily be adjusted.
The thumbnails have an optional caption which can appear on hover when viewed on computers. The large image captions are derived from the grid image alt text attribute.
There is also the option to add a double chevron llink icon at the top right corner. This can also be set to show on hover.
Images
The first thumbnail in this example is cropped to about 640px x 400px and the other thumbnails to 200px x 200px. The slider images are about 1500px wide.
The wide thumbnail image and all the slideshow images are dragged into the main Assets List. The thumbnail images can be dragged all together and dropped onto the Assets List in the widget settings.
The wide image and its corresponding slideshow image are selected first and their captions added. The remaining images are selected by selecting the thumbnail in the list and choosing the large image using the button provided.
Items Per Row
The number of items per row can be set for each device type - computer, tablet landscape, tablet portrait and mobile phone. The large thumbnail - if selected - will span all the rows irrespective of how many there are.
Captions & Icon
The captions can use a web safe font or a non web safe or Google hosted font with a web safe fallback. There are controls for font size, color and for the background color and its opacity. The lightbox link icon has its own color control.
Grid
The grid is centered in the browser with a maximum width setting. The grid items can have a border and/or a box shadow, and their spacing can be adjusted along with the top/bottom and left/right padding. The grid background color has an opacity slider.
Wrapper
The full width wrapper has its own control for setting the background color and its opacity and for adjusting the vertical spacing from the items above and below it.