Adding a Gallery or Slideshow

You can showcase a group of photos on your page by selecting the Gallery module.  A gallery is a collection of photographs, illustrations, product images, or videos displayed in a variety of rows and columns. This allows you to display more photos in less space while also making it easier for users to browse them.

Open your desired page in Page Editor mode and click the "+" in the upper right to expand the module selection menu. Find the "Media" section and the Gallery option.

Click and drag the gallery to the preferred area in your page.

Once the gallery is placed, the editing window will open.

On the General tab, the following options are available:

• Layout: how the gallery with display on the page. Collage will shrink the photos a bit but still retain their dimensions; Thumbs will generate small square previews of each photo. Both options will allow users to click on the previews to enlarge.
• Source: you can select from your website's media library, or display photos from a linked SmugMug account.
• Photos: here is where you will select the photos you wish to include in the gallery. You can select as many photos from your preferred source as you like by clicking the Add Photos link.
• Photo Size: this setting is only visible when Collage is selected as the layout. It controls how large the previews will display on the page. Small will show approximately 5 photos in a row; Medium is usually 3 photos in a row; Large is generally 2 photos in a row. The rows will dynamically adjust to display the number of photos you have chosen.
• Show Captions: you can decide to not show captions; display them when a user hovers over the photo; or below the photo.
• Click Action: this determines what will happen when a user clicks on one of the previews. None will do nothing; no enlarged photo will be available, only the preview/thumbnail.  Lightbox will open a "theater" style viewer over the top of the page with navigation arrows, allowing the user to scroll through all the available photos. Photo Link will simply open the photo in the existing window/tab.
• Lightbox Photo Size: this setting is only visible when the Click Action setting is set to Lightbox. You can select how large you wish the photos to display in the Lightbox.

There are additional spacing, border, and shadow options on the Style tab, as well as extra settings on the Advanced tab.

A gallery in Thumb mode:

A gallery in Collage mode, using Medium previews:

What the Lightbox looks like when a thumbnail is clicked, using the "Large" photo size option:

A slideshow is similar to a gallery, but displays the photos in an animated rotation (sometimes called a slider or a carousel). There are options for how long the pictures will display and how they transition from one to the next.

Open your desired page in Page Editor mode and click the "+" in the upper right to expand the module selection menu. Find the "Media" section and the Slideshow option.

Click and drag the slideshow to the preferred area in the page.

Once the slideshow is placed, the editing window will open.

On the General tab, the following options are available:

• Source: you can select from your website's Media Library, or display photos from a linked SmugMug account.
• Photos: here you can select the photos you wish to include in the slideshow. You can select as many photos from your preferred source as you like by clicking the Add Photos link.
• Display: these settings will control the overall appearance of your slideshow.
  • Height: how tall the slideshow will be on the page, in pixels
  • Skin Color: Light or Dark. Light will have white/grey colored navigation arrows over the slideshow photos; Dark will display darker grey arrows.
  • Crop: set to No, slideshow images will fit to the height you specify and keep the width proportional; set to Yes, slideshow images will fit to the content area while cropping the left and right to fit the height specified.
  • Disable Right-Click: setting to yes will not allow anyone to right-click and save an image from the slideshow.
• Click Action Type: None will do nothing if someone clicks an image; Link will open the image in the existing window/tab.

On the Playback tab:

• Autoplay: 
  • Yes: the slideshow will play automatically
  • No: the slideshow will require the user to click it to start.
• Speed: will control how long each photo is displayed before transitioning to the next photo.
• Transition: the effect the slideshow will use when switching from one photo to the next.
• Transition Speed: how long the effect between photos will take.
• Randomize Photos:
  • No will display the photos in the order in which they appear in the gallery you set up when selecting the Source.
  • Yes will display the photos in a random order.

On the Controls tab:

• Navigation Arrows:
  • No will hide the back/forward buttons on the slideshow.
  • Yes will display the navigation arrows and allow users to click forward and/or back through the slideshow.
• Control Bar Nav Type:
  • None: no control bar.
  • Buttons: will display a control bar with forward and back buttons as well as other options to display thumbnails of the photos, information on the photo (if there is any), to like the photo, which photo is being displayed, and to view the current photo full screen.
    
  • Thumbs: Displays thumbnails of all the photos in the slideshow, along with the options described/shown above.
    
  • You can also select if you want the control bar above the slideshow (Top) or below the slideshow (Bottom).

There are additional options available on the Advanced tab.

Slideshow of 500px height, Light skin color, and crop set to no:

Slideshow of 500px height, Dark skin color, and crop set to yes (same photoset):