Block Auto Gallery

ThemeKit Block Auto Gallery

The gallery uses the CSS Grid Layout Module to make a fairly complicated auto thumbnail grid with the minimum of code.
Auto
The widget can insert thumbnail images with varying aspect ratio and create a uniform grid. The thumbnail aspect ratio is set by the values for minimum width and row height.
There is no need for media queries - the thumbnail min width value changes the number of items per row for any given browser/device screen width.
Overlay
The overlay can be shown at page load or on hover when viewed on computers. There is a separate control for setting the overlay color and opacity for mobile devices.
The overlay has options for a caption, description and a horizontal separator. There are controls for caption size, descritpion size, line width and font color.
Thumbnail Styles
The thumbnails have controls for adding a border and/or an offset box shadow with controls for switching the shadow direction. Thubnails can be space out is the grid gap control if no rotation is applied.
Rotation
The thumbnails can be rotated clockwise or counter clockwise. There is a control to reduce the image scale when rotation is applied.
Checking a box will rotate the even numbered images in the opposite firction as shown in the example above.
When viewed on computers, the images will rotate to the vertical on hover.
The rotation can be removed for mobile devices by checking a box. This also removes the scale down so there is a control for setting the grid gap to compensate.
On mobile phones in portrait mode the roation and scale are removed and the thumbnails stack vertically.

Lightbox Gallery

The gallery images are responsive up to the maximum width of the image file. A width of around 1200px for landscape images should suit most applications. This will ensure that the image file size is kept below 200KB.
Controls
There are controls to change the slide transiton, set the transition time, show/hide the counter, hide the overlay, disable right click and to preload the previous and next slide images.
To adjust for odd shaped images there are controls adjust the height and width ratios and a checkbox to scale the images to that ratio.
Slide Captions
By checking a box the captions can inherit the font family set for the thumbnail captions and have their own controls for font size, color and animation time.
The captions can be positioned to overlay at the top or bottom of the image or to be outside at the bottom.