Blog Image Gallery
September 3rd 2018
The blog gallery widget can be used for a photo blog where a fairly large number of images need to be shown without taking up too much space.
The widget has a heading, optional date, an optional lead in paragraph, a thumbnail image with alt text and an optional caption, wrap text and some links.
The thumbnail image is paired with a large image which opens a lightbox window when clicked or tapped. There is lightbox icon at the top right to indicate its function.
The optional caption can be styled for font size, color and background color and its opacity.
More images can be added to the slider using the EverWeb Widget Assets list and there is a field for adding a large image caption.
The large images are responsive and their maximum size will be equal to the image file width. There is a control for adjusting the image's percentage width. The default is set to 90%.
The slides are navigated on computers using directional arrows and by swiping on touch devices lke the iPad and iPhone.
The slideshow has controls for adjusting the transition time and for implementing smart preload and showing the slide counter.
Smart preload downloads the first and second images on page load and then preloads the next image as the visitor progresses through the slides.
Links
The optional back link is positioned absolutely at the top right of the container. It is used to link back to the list of blog posts.
The CTA links which appear at the bottom of the container can be turned on as required. The first one can be configured to open internal or external pages and open in a new window if required. The second link is for internal use only.
The links share the same styling options and these are for background, color and hover color. The bottom links have a border radius control and the back link inherits the container border radius if applied.
Container
The container has a maximum width setting and can be styled with a border and or box shadow and has adjustable padding. The container's full width wrapper can be styled for background color and opacity and vertical spacing from the items above and below it
Back