Gallery For Dummies

This grid will suit those who don't know or care that they should crop all their images to a suitable size and aspect ratio before importing them into EverWeb and haven't a clue what a media query is.
If one or two of the thumbnail images have a slightly different aspect ratio from the majority, they will be stretched to fit .
Layout
The number of items per row for each device type can be set in the widget settings. The grid item spacing is adjusted using the "grid-gap" property and there are controls for adjusting the left/right padding and the vertical spacing from the items above and below.
Grid Items
Each item is an HTML5 <figure> element with an image with alt text and a <figcaption>. The caption overlays the bottom of the image and can be set to appear on page load or on hover when viewed on computers.
The caption hover uses a CSS animation which transitions the opacity over time.
Captions
The captions can use a web safe font or a non web safe or Google hosted font with a web safe fallback. The font used in the above example is the Google hosted font "Stint Ultra Expanded".
There are controls for setting the font size and color and the background color and its opacity.
Thumbnail Images
The thumbnail images should be cropped to size before importing into EverWeb. They don't need to be any wider than about 360px.
Slideshow
The lightbox slideshow is responsive up to the maximum width of the large version of the image and has a slide counter. The large images don't need to be any wider than about 1200px for most purposes.
The slide captions are derived from the thumbnail image's alt text attribute so the caption should contain keywords for the search angines - as well as the visitors.
The navigation arrows can be hidden when the slider is view on a touch device where the images can be swiped.
Website Images
Images make up about 80% of the average web page content and are the main factor in poor download performance. Visitors using mobile device will give up and go elsewhere if they have to wait too long for the content to appear.
If your web pages don't download in under 2 seconds, check out the info on how to bulk resize images by following the link below.
Another cause of poor performance is badly formed image file names. Since these become part of a URL, they should be all lower case and have no spaces or special characters in them. Use hyphens to separate the words in the file name so that the search engines can index them properly.