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
Collage or Thumbs.
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:
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).
- Photo spacing
The horizontal and vertical spacing between the images, in pixels.
The standard Beaver Builder borders and border effects.
- Photo spacing
The Advanced tab for rows, columns, and modules
The Advanced tab offers nearly identical settings on all Beaver Builder rows, columns, and modules.
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.
- 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.
- 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.)