Gallery

Created On
Last Updated On
byagaber
You are here:
< All Topics
Table of Contents

The Gallery Module is used to display a gallery of images from either the Safhitak Media Library or a SmugMug gallery that you specify.

Uses of the Gallery module

The Gallery module is used to display a collection of individual photos in a pleasing fashion. Depending on what happens when users click a module (see the section on the module’s settings), you can use the Gallery module to:

  • Display the series of photos one by one in a lightbox with navigation aids.
    This works particularly well when the gallery images are displayed in a small size that users can open to view a larger version of the image.
  • Display the full-sized image on a page of its own.
    This option works well when the intention is for viewers to right-click and download single images, such as for an image library.
  • Gallery images don’t have a clickable link. You might want to display the gallery as images that are large enough to view clearly and really don’t need to be expanded to a larger size.

Properties of the Gallery module

  • You can display the gallery in either a Thumbs or a Collage layout. Here’s an example of Thumbs layout, in which image thumbnails are presented in a grid.
  • Here’s an example of the Collage layout at medium size.
  • The ordering of the photos in both the Collage and Thumbs layouts matches the Safhitak media gallery order that you set up. When you create or edit the Safhitak gallery, you can reorder the images by dragging and dropping.

Gallery module settings

General tab

  • Layout
    Collage or Thumbs.
  • Source
    Choose the Safhitak Media Library or SmugMug. For the Media Library, in the Photos field choose the images you want to include. For SmugMug, see the instructions below.
  • Photo size
    This field appears for Collage layouts only. The Thumbs layout always displays Safhitak thumbnails, either the default 150×150 or custom size you’ve set.
  • Show captions
    If you select this option, image captions are pulled from the Media Library or the SmugMug library. By default, longer captions are cut off with elliptical periods.
  • Click action
    Specify what happens when an image is clicked:

    • None
      No action.
    • Lightbox
      Open the image in a lightbox with Previous and Next arrows. You can choose the max size on devices large enough to display it.
    • Photo link
      Use the image URL to open a large-sized image displayed on a page with no theme or other formatting and no navigation links to the other images in the gallery. The large size in Safhitak by default is a max height and max-width of 1024px (or the full size of the image if you uploaded one less than 1024px).

Style tab

    • Photo spacing
      The horizontal and vertical spacing between the images, in pixels.
      Photo border
      The standard Beaver Builder borders and border effects.

The Advanced tab for rows, columns, and modules

The Advanced tab offers nearly identical settings on all Beaver Builder rows, columns, and modules.

Spacing section

For rows and columns, you can change the default margin and padding values. For modules, you can change the default margin values only.

Lock and unlock the spacing settings

You can lock the four margin and padding settings so that you can enter one value into any field and all four settings (left, top, right, bottom) show that value. Click the Lock icon, circled in orange, to lock the settings and click it again to remove the lock:

Add specific spacing settings for device size

  • Using the icon circled in blue, you can add settings for each device size or let Beaver Builder handle the smaller devices automatically.

Visibility section

  • In the Breakpoint field, you can set the row, column or module to display or hide based on device size.
    In the Display field, you can choose to display the row, column, or module always, never, or only to logged-in or logged-out users.

Animation section

  • You can assign an entrance animation, which activates the first time the page is loaded, and the row, column, or module comes into view. The default is None.
    If you choose an entrance animation, set the delay (how long before the animation starts, in seconds) and duration (how long the animation lasts, in seconds.)