This is a really lightweight alternate to an image carousel. Scrolling vertically on computers scrolls the image horizontally.
On touch devices the images can be swiped. There are no bulky supporting scripts to download which makes this an ideal way to display images on a responsive website.
The images can be configured as links and show a link icon for the benefit of mobile device users.
On computers the captions and icons can show on hover.
Images incorrectly sized, unsuitably inserted and unoptimised are one of the main causes of web pages failing the Google PageSpeed Insights recommendations.
Image Size
The image file should be reduced to the maximum width that it will occipy on the web page. A content width image must provide a smaller version for mobile devices.
Optimising images before import into EverWeb will save up to 20% for JPGs and 50% for PNGs.
Image Insert
A content width image file is far too large for downloading on a small mobile device. The image needs to be inserted in two sizes using the HTML5 picture element with a caption and alt text for the visitor's and the search engines.
Lazy Load
Lazy loading defers the loading of images and should be applied to images that are not in view at page load (i.e. below the fold) to dramatically reduce download and interaction time.
Show off and briefly describe a couple of finished projects to grab attention.
Use the marker for a sequence number or date.
Never show too many and choose the very best!
The article has a heading, text and an optional link.
Overlap
The overlap is created using a background linear gradient with a color to the left and transparency to the right.
Span
Adjusting the percentage width of the transparent section adusts the overlap.
The basic content layout unit is an article with an image and a text section with heading, text and an optional link.
Layout
This two column grid layout means that only one image file is required and the text lines are short and easier to read.
Animation
Both the article and the image can animate in using any of the animation types included in the ThemeKit custom stylesheet.
Animation should be kept to a minimum on a portfolio site unless it is required to draw attention to an important item.
Styles
The ThemeKit Folio Article widget shares the same design concept as the ThemeKit Folio Video widget.
