Adding a Photo Gallery

Overview

The Photo Gallery widget makes it easy to add multiple images to your website. When images in the Photo Gallery are clicked, they can be opened in a lightbox gallery or linked to a page on your website, a website URL, a popup, an anchor, an email address or more. If you like, you can add titles, descriptions and Alternative Text to each image.

Note: We have deployed a new Photo Gallery widget update. You have the option to update your widget or use the old Photo Gallery widget settings to edit your gallery. If you choose to update the widget, a backup of the site will be created automatically. For more information about how the update affects your photo gallery, please read the Considerations section.

updateimg_en-US.png

Guide

To add a Photo Gallery to your Website, follow these steps: 

Add the Photo Gallery widget onto your responsive website. To learn more about adding widgets to your website, see Adding Widgets. Once the widget has been placed, the Content Editor will appear.

Adding images

Click the Add image button.AddingAPhotoGallery1_en-US.png

Select any of the images you have in the image picker.

AddingAPhotoGallery2_en-us.png

From here, you can:

  1. Select the folder with images you want to use
  2. Press the "+" icon to upload your own image
  3. Switch to the Full View for more image choice options

See the image picker article for more information on the image picker.

You can add titles, text and buttons to your images in the gallery. Add these features by clicking on the image and editing the image settings. You can also add links when the buttons are viewable [only available in new widget]. Content is viewable when the eye icon is highlighted.

newphotogallery1_en-US.png

Customizing your Photo Gallery

  • To change the Photo Gallery layout, open the Design Editor and click the Layout section. We have multiple layouts to choose from to provide more design options to your Photo Galleries. Layouts are managed per-device and based on the current view in which the layout is selected. Note that some layouts are only available in the new Photo Gallery widget.

    AddingAPhotoGallery3_en-US.png

  • Text can be set under images on the hover, or on the image in the Layout tab. You can change the text and button positions as well as button styling and size [available on new widget].newphotogallery2_en-US.png
  • You can change the image height and spacing between the images. Note that this is only applicable for certain layouts.You can also add rounded corners, display the full image on the gallery, add shadows, and change the image hover effect and animation [available in new widget].                                       newphotogallery3_en-US.png
  • To change the font style of the image titles and descriptions, click the Item tab. 

    AddingAPhotoGallery5_en-US.png

  • To add a background color, customize the border, and add hover effects and animations, click the Frame tab.

    AddingAPhotoGallery6_en-US.png

  • To change the inner and outer spacing, click the Spacing tab.

    AddingAPhotoGallery7_en-US.png

Considerations (only relevant for the new photo gallery)

Is my gallery widget the new one?

If your gallery has been created after September 24th or if you have updated the widget already, you are using the new gallery widget.

What if I don’t want to update my widget?

You do not have to update your widget. You will be able to edit your widget using the previous widget editor as well.

What if I reload a backup or use the undo feature?

If you reload a backup or undo while editing an existing Photo Gallery Widget, you will need to re-update the widget. Keep in mind that if you do choose to update an existing photo gallery widget, a site backup will be created automatically.

The hover effect doesn’t work on Internet Explorer, what can I do?

Unfortunately, Internet Explorer doesn’t support this feature.

How do I hide the ‘share’ option?

You can hide the share option in the Design Editor under the Frame section. This will remove the share button that users would see when clicking on an image in the photo gallery.newphotogallery4_en-US.png

Resources