Gallery Navigation Grid
Responsive Image Links
A responsive image grid with captions. Each image can be a link to a page with an image gallery - or any type of page - to create a pictorial navigation menu for the site or directories.
A second caption line using the HTML line break <br> can be added after checking a box to increase the height of the caption area.
It is important to check the grid in the browser by reducing the browser width to test the responsive effect and to make sure that any of the captions aren't too long.
The example grid displays three images per row when viewed on a computer, two when viewed on a tablet device in portrait mode and one 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 is entered into the widget settings for each device type.
The image horizontal and vertical spacing can each be adjusted.
All the images need to have the same aspect ratio and should be cropped to the maximum size required. An image width of around 360 - 400px is a good compromise between quality and download speed.
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. The text can be switched to appear at the top of the image grid if required by simply checking a box.
The widget has an optional footer so that it can create a fully responsive page when combined with a suitable header/navigation widget.
The footer can accomodate several lines of text by using the HTML line break <br> to create returns. The footer height can be adjusted accordingly and the text position in relation to the top can also be adjusted
The footer has an optional smooth scrolling "Back To The Top" chevron which inherits the footer text color.
If a phone number is inserted into the footer - or anywhere else for that matter -the "No Phone Link" button should be checked. This prevents the number being displayed as an unstyled link when viewed on a device like an iPad or iPhone.