Blog Related Posts
To encourage visitors to stay on a blog, it's important to have links to related blog posts just above the footer at the bottom of the blog entry page.
Using image links with a caption and a few words of description will not only make visitors more likely to follow but also get the search engines to index the keywords.
Grid
The number of images per row can be set for each device type - computer, tablet landscape, tablet portrait and mobile phone.
Each device type also has a control for setting the item spacing. The left right padding is added automatically as half the grid gap value using CSS calc.
Images
Needless to say, the images should be cropped to a reasonable size before importing into EverWeb. They don't need to be any wider than about 360px to 400px.
The images can have a border with controls for width and color if required to help separate them from the background.
Lazy Loading
Since the grid will be at the bottom of the page it doesn't need to download with the page content at page load.
The images are lazy loading and don't download until just before they are scrolled into view.
Grid Items
Each item is an HTML5 <figure> element with a caption, optional line, description and link. The content is centered horizontally and vertically and there is a control for adjusting the vertical spacing of the items.
Overlay
The overlay has controls for background color and its opacity. The font can be web safe or non websafe or Google hosted with a web safe fallback.
The optional line is created using an HTML5 <hr> element. It is set to 1px in height and has a controlsfor setting its color and a slider for setting its percentage width.
Links
The link text only has to be entered once as it is inserted using a CSS ::after pseudo element. The default setting is the internationally recognised three periods enclosed in square brackets - [...]
The link has controls for setting the font size, weight, color and hover color. There is also a control for letter spacing to increase the link's width to make it an easier target for fingertips on touch devices.
