EverWeb Widgets

ThemeKit Penta Grid

Penta Grid

The widget inserts the images in a CSS Grid layout with thirteen columns and auto rows. The images are positioned using the column-span and row-span selectors and the amount of overlap can be adjusted using the grid-gap selector.
In this example the grid and wrap backgrounds have their opacity sliders zeroed to show the background image which is described further down the page.
Images
The grid can accept from 5 to 20 images. The images have alt text and an option to scale on hover when viewed on computers.
There's also an option to increase the z-index on hover to bring the left and right column image to the front.
Items
Each image is inserted in an HTML5 <figure> with an optional caption in the <figcaption> element.
The caption is centered at the bottom of the image and has controls for font family, fallback font, font size, color and line height and for the background color and its opacity.
Links
The images can be configured as internal and/or external links and have a new window option.
There are controls for adding a border and/or a box shadow.
Break Point
On screen widths below the break point the images stack vertically and have a control for vertical spacing.

ThemeKit Penta Gallery

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
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.

Image Background

The widget is named ThemeKit Image Background since it is an image set in the background rather than a background image. In general a background image should not be used in responsive page design since the image file required is way to big and will seriously compromise the page download time on mobile devices.
HTML5 Picture
The image is inserted in three sizes for the various devices using the <picture> element which has the added advantage of allowing an alt text attribute for keywords for the search engines and screen readers.
Rather than be stretched to fill the whole browser, the image has its width and height set in viewport units.
Images
Before importing into EverWeb the images were sized to 1200 x 800px 800 x 800px and a 9:16 aspect ratio image at 375px wide for mobile phones in portrait mode.
Overlay
The optional overlay has controls for the background color and its opacity and has a fade in animation with controls for the animation time and delay.