Skip to main content
Version: Beaver Builder 2.11

Gallery

Use Gallery to display multiple photos in a collage or grid layout with optional captions, lightbox, and SmugMug support.

Usage​

Use Gallery to display multiple photos in a single module using either a Collage layout that arranges photos at varied widths or a Thumbs layout that renders uniform thumbnails. Photos can come from the WordPress media library or a SmugMug RSS feed, and each image can open in a built-in lightbox, link to its full-size source, or render without a click action. Captions read from the WordPress media manager or the SmugMug feed and can show on hover or below each photo.

Use Gallery on portfolio pages, event recaps, product showcases, and any layout that needs to present a curated set of images without building a custom grid by hand. It fits straightforward image-collection workflows where photo selection, layout, and click behavior need to stay simple.

Module Settings​

The Gallery module settings control which photos appear, how the gallery is laid out, what happens when a photo is clicked, and the spacing and border applied to each image.

General Tab​

The General tab selects the layout, photo source, photos, captions, and click behavior.

Layout Default: Collage

Sets how photos are arranged in the gallery.

  • Collage: Arranges photos at varied widths in a masonry-style layout and reveals the Photo Size field.
  • Thumbs: Renders photos as uniform thumbnails based on the WordPress thumbnail size.
Source Default: Media Library

Selects whether photos come from the WordPress media library or a SmugMug RSS feed.

  • Media Library: Pulls images from the WordPress media library and reveals the Photos field.
  • SmugMug: Pulls images from a SmugMug gallery RSS feed and reveals the Feed URL field. The RSS feed URL can be accessed by using the get a link function in your SmugMug gallery.
Media Library Settings
Photos Supports: Field Connections

The set of photos selected from the WordPress media library. This field appears when Source is set to Media Library.

SmugMug Settings
Feed URL Supports: Field Connections

The SmugMug gallery RSS feed URL used to load photos. This field appears when Source is set to SmugMug.

Photo Size Default: Medium

Sets the rendered photo width used for the Collage layout. This field appears when Layout is set to Collage.

  • Small: Renders photos at approximately 200px wide.
  • Medium: Renders photos at approximately 300px wide.
  • Large: Renders photos at approximately 400px wide.
Show Captions Default: Never

Controls whether photo captions display and where they appear. Captions read from the caption field in the WordPress media manager, or directly from the SmugMug feed when SmugMug is the source.

  • Never: Hides photo captions.
  • On Hover: Shows the caption as an overlay when a photo is hovered.
  • Below Photo: Shows the caption beneath each photo.
Click Action Default: Lightbox

Selects what happens when a visitor clicks a photo.

  • None: Disables the click action so photos are not clickable.
  • Lightbox: Opens the photo in the built-in lightbox and reveals the Lightbox Photo Size field.
  • Photo Link: Links each photo to its full-size image URL.
Lightbox Settings
Lightbox Photo Size Default: Large

Sets the WordPress image size used when a photo opens in the lightbox. This field appears when Click Action is set to Lightbox.

Style Tab​

The Style tab controls the spacing between photos and the border applied to each photo.

Photo Spacing Default: 20

The space, in pixels, between photos in the gallery.

Photo Border Supports: Responsive

The border style, width, color, and radius applied to each photo, plus an optional box shadow.

Advanced tab​

The Advanced tab includes all the standard settings for margins, visibility, animations, and advanced HTML configurations.

See the Advanced tab section for more information.

The Button module has a built-in lightbox feature, but if you put in the shortcode for a gallery, the entire gallery will display in the lightbox, rather than the individual gallery images.

You can configure the button click to display the individual gallery images in the lightbox, with previous and next navigation, as shown in this screenshot:

The instructions here will show you how to create a Button module an a Gallery module, add custom IDs, and copy in some jQuery to make it all work.

1. Create a Button module​

Create your button and give it a custom ID also, using these instructions.

  1. Drag a Button module into your layout.
    Leave the Click Action set to Link but don't add a link.
    The link will be set by the jQuery.
  2. On the Advanced tab in the HTML element section, enter an ID for your button in the ID field.
    In this example, we'll use gallery-1-button as the ID value.
  3. Enter any other style settings you want for the button and save the module.

Create your gallery and give it a custom ID using these instructions.

  1. Add a Gallery module to your layout.
    Placing the gallery in a row under the button is a good place. The jQuery will keep the gallery from being displayed on your main page.
  2. Add photos to the Gallery module in the normal fashion.
  3. On the General tab, set Click action to Lightbox and select the size of image you want to display in the lightbox.
  4. On the Advanced tab, in the HTML element section, enter an ID for your gallery in the ID field.
    In this example, we'll use gallery-1 as the ID value,
  5. Save the module.

3. Add the jQuery code​

Add the jQuery code using the following instructions.

  1. In the Beaver Builder editor, click the down arrow in the Title bar in the upper left corner to open the Tools menu, then choose Layout CSS & JavaScript.

  2. Click the JavaScript tab, then paste in the following code. 

    jQuery(document).ready(function ($) {
      var galleryid = "#gallery-1"; //Gallery ID
      var buttonid = "#gallery-1-button"; //Button ID

      if ("undefined" !== typeof FLBuilderConfig) {
        return;
      }

      jQuery(galleryid + " .fl-photo-img").hide();

      jQuery(buttonid).on("click", function (e) {
        e.preventDefault();
        $(galleryid + " img")
          .first()
          .trigger("click");
      });
    });

  3. Change lines 2 and 3 to the ID values that you assigned to the Gallery module and the Button module respectively.

  4. Click Save to save the code.

  5. Publish the page. Hold down the Shift key and click the Refresh icon to clear your browser cache, then test your button.

tip

If you're using more than one button and gallery lightbox on the same page, duplicate this jQuery code and change the ID values to match each button and gallery.