Now is your last chance to buy a lifetime license before we switch to annual pricing. Existing licenses will be unaffected.

Gallery

The Gallery element displays a customizable image gallery with options for captions, hover effects, and a lightbox.

Add a Gallery element to your page from Add+ > Helpers > Gallery.

Adding Images to the Gallery

The Gallery Source is where you populate your Gallery with images. You have three options:

Media Library - specify Image IDs that exist in your WordPress media library. Click Browse to select images from your WordPress media library.
ACF - use a Gallery field from the Advanced Custom Fields plugin
WooCommerce - display the images product gallery for the specified WooCommerce product
Meta Box - use the Meta Box Image Advanced field as the Gallery source. If the Gallery is located on a Settings page, you need to set the source to the settings page slug, followed by a forward slash and then the Meta Box field slug. For example: my-settings-page/my-field-slug. Meta Box Settings page support is added in Oxygen v4.

Choose yes to link the image to its full size image file, or no to disable the link.

This option appears when Link Images is set to yes. Instead of linking to the image file itself, the image will be displayed in a lightbox.

This controls the layout of the gallery, including the image aspect ratio, number of images per row, and spacing between images.

Layout - choose either flex or masonry. Flex keeps all images in orderly rows, while masonry arranges images based on their own sizes and the number of images per row.
Image Aspect Ratio - if flex is chosen for the Layout, specify an image aspect ratio like 16:9 (widescreen), 21:9 (cinematic), 1:1 (square), etc.
Images Per Row - set the maximum number of images displayed in each row.
Space Around Image - control the spacing between each image.
Image Min Width - Use this property to make the gallery responsive. Images will not be displayed narrower than this width.

Show Captions - choose yes or no.
Caption Color - set the text color of the captions.
Caption Background Color - set the background color where captions are displayed.
Show Captions Only On Hover - choose yes or no.
Hide Captions Below - set a screen size below which captions will not be displayed.

Image Opacity - the image opacity when not hovered.
Hover Image Opacity - the image opacity when hovering over it with the mouse.
Transition Duration - set the duration of the transition for the image hover opacity, and the display of the caption if it is present.

Last modified: April 25, 2022