Responsive Grid Gallery

Until the introduction of EverWeb V 2.1.0, it was not possible to create an image gallery with separate thumbnail images. The thumbnails were derived from the full size images using javascript making for an inefficient, slow loading page when more than a few images were used.
Now that the file selector control can be used inside the EverWeb widget API's Assets List it is possible to load separate, cropped thumbnail images en masse by dragging them from the finder onto the widget's Assets List.
The full size images can then be selected by highlighting the thumbnail file name in the list and using the new, wider "Choose" button .
This particular widget uses the text entered into the thumbnail alt attribute to generate the large image captions. It is essential to enter descriptive captions - even if the captions have been turned off - so that the search engines can index the images.
There are no thumbnail captions in this version although the thumbnail spacing can be adjusted.
The lightbox style slideshow is navigated using back/forward arrows or grab and drag on computers. On tablets and mobile phones, the arrows disappear since swiping or tapping can be used. Note the delayed action of the slideshow image captions.
The widget has an h1 heading and a paragraph for descriptive text inside the gallery container. A slideshow without a text description may as well not be there as far as the search engine spiders are concerned!
Grid
The example grid displays four images per row when viewed on a computer and a tablet in landscape mode, three when viewed on a tablet device in portrait mode and two on a mobile phone.
Reduce the browser width to see the responsive action or view the page in the browser's responsive mode or the iOS Simulator. The number of images per row for each device type can be adjusted in the widget settings by specifying the number of thumbs per row for each one.
Thumbnail Images
All the thumbnail images need to have the same aspect ratio and should be cropped to the maximum size required. An image width of around 300px is a good compromise between quality and download speed.
Text Content
Since the grid is contained in an HTML5 section element, it can have an h1 heading and descriptive text which the search engines will see as being related to the images.
Optional Footer
This example uses the optional footer to form a fully responsive page. If viewing this on a computer, reduce the browser width to see this in action.
The footer has an option to automatically update the © notice year and a built in, smooth scroll to the top chevron which inherits the same font color as the footer text.