Galleries

The Image Gallery element in the page builder takes a set of images and shows them one of six ways. The choice is made once, in Gallery Type, and everything else in the panel follows from it: pick a slider and you get slider options, pick the grid and you get the grid's layout, spacing and hover styles.

Each image carries its own title, caption and, for masonry grids, a size. Those are set on the image in the media library, not in the element, so the same image keeps them wherever it is used.

Gallery Type

Basic Slider Style A simple fading slider that shows each image at its own aspect ratio. The right choice inside a column, where a full slider would be too much.
Nectar Slider Style A quicker way to make a Nectar Slider from a set of images. It looks and behaves like one, minus the video slides.
Flickity Style A touch-enabled carousel with space between the images, and the most options of any type: columns, controls, wrap-around, autoplay, ticker movement.
Flickity Static Height Style The same carousel with every image scaled to one height, so a mixed set of portrait and landscape shots reads as a single row.
Image Grid Style A grid of cropped thumbnails, two to four across or fullwidth, with a hover treatment and an optional lightbox. This is the type shown above.
Parallax Image Grid A two-column grid where each image drifts on its own as the page scrolls.

A new element starts as a Basic Slider. The Image Grid type is only offered while the Salient Portfolio plugin is active, since it borrows the portfolio's grid.

Options for every type

Image Source Choice Media Library, or External Links for a list of image URLs. External images cannot carry titles, captions or masonry sizes, so the grid's caption and masonry options do nothing for them.
Images Media The set, chosen from the media library. Select as many as you need in one go. The order here is the order they display.
Image Size Text A WordPress size name such as full or large, or a width and height to crop to. The grid crops every thumb to this; the sliders show images uncropped.
On Click Choice Do nothing, Open lightbox to show the full-size image, or Open custom link with a URL per image. Available for the slider types; the grid always opens the lightbox.
Extra class name Code For your own CSS.

Image Grid

The grid is the portfolio's layout with images in place of projects, so anything you know from the Portfolio settings applies here. Thumbs are cropped to Image Size (600 by 400 unless you change it) and laid out with the spacing you choose.

Layout

Layout Choice 4 Columns, 3 Columns, 2 Columns, Fullwidth or Constrained Fullwidth. The column layouts keep the grid inside the row; the fullwidth ones run it edge to edge, which is also what a structured masonry grid needs.
Masonry Style Toggle Lets each image take the size set on it in the media library, so the grid becomes a mix of regular, wide, tall and wide-and-tall tiles.
Bypass Image Cropping Toggle Shows each thumb at its own aspect ratio instead of the crop, for a looser masonry.
Constrain Max Columns to 4 Toggle Fullwidth only. Stops the grid going wider than four across on large screens.
Item Spacing Choice Default (15px) or a fixed gap from 1px to 20px.
Display Title/Caption Toggle Shows each image's title and caption in the hover overlay, or below the thumb for the style that puts meta there.
Load In Animation Choice None, Fade In, Fade In From Bottom or Perspective Fade In, run as the grid scrolls into view. Lazy loading turns this off.

Gallery Style

The hover treatment, named as it is in the panel. The preview at the top of this page uses the first one.

Meta on hover w/ zoom + entire thumb link The thumb zooms under a dark wash and the title and caption scale up into the centre, over one second on a slow-out curve. The whole thumb is the link.
Meta overlaid w/ zoom effect on hover Title and caption sit on the image from the start; hovering zooms the image behind them.
Meta overlaid w/ zoom effect on hover alt The same, with the meta set lower and smaller.
Meta overlaid, bottom left aligned Meta in the bottom corner with an arrow, over a slower zoom.
Meta on hover + entire thumb link The overlay and meta fade in without a zoom.
Meta from bottom on hover + entire thumb link The meta slides up from the bottom edge.
Meta below thumb w/ links on hover Title and caption under the thumb, with the lightbox and link icons appearing over the image on hover.

Masonry sizing

With Masonry Style on and a Fullwidth or Constrained Fullwidth layout, each image's Masonry Sizing decides the tile it fills: Regular, Wide, Tall or Wide & Tall. The field lives in the media library's attachment details, alongside the title and caption, and only appears while the Image Grid type is selected.

Structured masonry needs a fullwidth layout

Wide and tall tiles are sized as fractions of the row, so the column layouts cannot fit them. If the grid looks uneven after setting sizes, check that the layout is one of the fullwidth ones.

Flickity carousels

Both Flickity types share one set of options; Static Height adds a height per device and lets the images keep their own widths inside it. Give a carousel at least three images, since the layout shows the neighbors either side of the current one.

Controls Choice Pagination, Material Pagination, Next/Prev Arrows, Next/Prev Arrows Overlaid, Touch Indicator and Total Visualized, Touch Indicator, or None.
Image Spacing Choice Default or a gap from 5px to 70px, applied either side of each image.
Columns ChoiceResponsive. Set a different value for desktop, tablet and phone. How many images are in view on desktop, small desktop, tablet and phone. One column shows a single large image with its neighbors peeking in.
Wrap Around Images Choice Wrap Around for an endless loop, or Do Not Wrap to stop at the ends.
Overflow Visibility Choice Whether the images beyond the edges of the row are visible or clipped.
Enable Auto Play Toggle with Pause Autorotate On Hover, and a Slider Transition Type of Default or Ticker Movement with its own speed for a continuous crawl.
Free Scroll Toggle Lets a swipe coast instead of snapping to the next image.
Image Parallax, Subtle Image Scale When Dragging and Stagger Columns Toggle Motion extras: images drift as the row scrolls, shrink slightly while being dragged, or start at staggered heights.
Mask Edges Toggle Fades the row out at both ends.
Box Shadow Choice None, or Small to Very Large Depth under each image.

Basic Slider

A fade between images every seven seconds, with arrows and swipe. Images are shown at their own aspect ratio and uncropped, so a set that mixes portrait and landscape will change height as it moves; if that matters, crop them to one size first or use the Nectar Slider, which holds one aspect ratio.

Nectar Slider

Builds a Nectar Slider from the images, in the same style as the plugin's own sliders, with the same height and navigation options. If the Nectar Slider plugin is not active the gallery falls back to the Flickity carousel. The plugin's video and caption features are not available here; for those, make a Nectar Slider directly.

Parallax Image Grid

Two columns of images, each moving at a slightly different rate as the page scrolls so the grid has depth. Titles and captions sit under each image. On very wide layouts inside a full-width column it opens out to three across.

For the grid, and for sliders set to Open lightbox, clicking an image opens it full size in the theme's lightbox with the rest of the gallery as a set, so a visitor can step through them without closing it. The lightbox uses each image's title as its caption.

Gallery Type​

Options for every type​

Image Grid​

Layout​

Gallery Style​

Masonry sizing​

Flickity carousels​

Basic Slider​

Nectar Slider​

Parallax Image Grid​

The lightbox​