EverWeb PhotoKit

Picture Insert

HTML5 Picture Element

The <picture> element enables different images to be displayed for different devices or screen sizes. In this application it is used to give the option to display a smaller image file for tablets in potrait mode and mobile phones.
Images
The images displayed here are set to a maximum width of 100px so the image file was reduced to that width before importing into EverWeb. The mobile version of the image was reduced to 600px;
Container
The image is inserteed in an HTML5 <figure> element which has controls for padding, background color, border width, color and radius and box shadow radius and color.
Wrapper
The full width wrapper has controls for background color and its opacity and for adjusting the top/bottom and left/right spacing which muxt be added if a box shadow is present.

HTML5 Figure Element

The <figure> element should be used to insert images since it has a <figcaption> element for inserting the caption. An image without alt text and a caption may as well not be there as far as the search engines are concerned. When a <figure> element is used, the search engines know that the text in the <figcaption> is related to the image.
The caption can be inserted below the image as shown in the first example or it can overlay the image as shown above, The overlay position can be top or bottom and there is a control to adjust iys position on th Y-axis.
The caption can use a web safe font or a non-web safe font or Google hosted font with a web safe fallback, There are controls for font size, color, padding and background color and its opacity.
When positioned below the image, the caption background control is not required since the exposed area containing the caption will have the color set by the control for the containerbackground.
Links
The <figure> element can be configured as a link to open internal or external pages and has a bew window option..