An image gallery is a dynamic element in your site that shows several images in a compact space, with a number of options such as label, animated transition, thumbnails, arrows, etc.

A quick way to create a gallery is to add it from the Sparkle interface (toolbar, Insert menu or the “Add” popup) and then add the images. A quicker way is to drag the images from the Finder, or from Photos, directly to the Sparkle window and let Sparkle create a gallery.

The default settings produce a gallery with cross-fading images, manually advancing using the side arrows or the swipe gesture on touch devices. You can add further images by dragging them over the gallery or thumbnails in the settings inspector. Clicking on the Edit button opens the full list of images, from where you can reorder images or set the image storage mode.

By enabling the slide label you can add contextual information, with full text styling abilities. With selection behavior similar to groups, once the gallery is selected, a click on the label will select it and make it editable, like a regular text block. You can add On Click behavior to the text alone, via the text settings, or add it to the entire slide via the gallery settings. The same On Click settings that apply to images can be used for image galleries.

The letterbox mode determines whether the image will always cover the gallery frame or be fitted within the frame. In fit mode the parts of the frame that aren’t covered by the image will be filled with the letterbox color.

The transition style determines how the next image replaces the current one. The transition speed, in seconds, is the time for the crossfade or slide.

When you have 5 or more images you can add thumbnails, placing them above or below the image, and controlling distance, margin and the selection outline color. The thumbnail size is controlled automatically to fill the width of the gallery element, so adding more visible thumbnails makes them smaller.

You can control arrows position and color, and whether they show at all via the “Left/right arrows” option. Alternatively (or additionally) you can enable dots, which appear at the bottom of the gallery frame.

The wrap around option enables gallery navigation loop, it restarts from the first image when pressing the right arrow on the last image, and specularly goes to the last image when pressing the left arrow on the first image.

Enabling “Automatic slideshow” will make images advance automatically after the set interval, without user interaction. You can optionally enable pausing the automatic advancement by moving the mouse cursor over the image.

Unlike normal on canvas images, gallery images can be optionally stored only in their original location on your Mac, via the image storage mode setting. While they are always sent to your website when publishing, they will not burden your main project file. On the flip side if the original images are lost or you share the project file, the connection to the images is broken and Sparkle won’t be able to publish them.

Instagram source

The Instagram mode for galleries lets you integrate images from an Instagram feed without needing to re-publish the site. You can also integrate a feed via an image or with the dedicated Instagram element.

The gallery will connect to your feed from your live site, showing the configured number of recent images. All other gallery options apply to the Instagram-sourced gallery.