Skip to main content
All CollectionsEditing a Site
Adding a Photo Gallery
Adding a Photo Gallery
Support avatar
Written by Support
Updated over a month ago

Overview

The Photo Gallery widget makes it easy to add multiple images to your site (or connect an Instagram feed; for more information, see the section in this article, Connect a Public Business Instagram Feed. When images in the Photo Gallery are clicked, they can be opened in a lightbox gallery or linked to a page on your site, a website URL, a popup, an anchor, an email address, or more. You can add titles, descriptions, and alt text to each image.

Guide

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

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

Adding images

  1. (Optional) To enable links on gallery images, click the Enable links on gallery images toggle at the top of the editor.

  2. Click Add image.

3. Select any of the images you have in the image picker. Complete the following:

  • Select the folder with images you want to use.

  • Click the + icon to upload your own images.

  • Switch to the Full View for more image options.

  1. To edit the position, and add a title, description, and button to your image, click the image and edit the Image Settings.

2. Use the Rich Text Editor to add color, emphasis (bold, italics and underline), and bullets to text in the description box.

Photo Gallery Design Editor

To customize the Photo Gallery, open the Design Editor.

  1. To change the gallery layout, click the Layout tab. You have the following options:

    Click the existing layout to see more design options for your photo gallery. Layouts are managed per-device and based on the current view in which the layout is selected. Text can be added under images, on the hover, or on the image.

    Select Text/button under image, Text/button on hover, or Text/button on the image, and then select a position for the text/button. Select the Number of columns in the Photo Gallery. To adjust the number of columns automatically to avoid white space, click the Auto adjust columns toggle. Select how many Visible rows you want to display.

  2. To change the image height and spacing between the images, click the Item tab. 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 the new widget). This is only applicable for certain layouts.

  3. To configure the frame style, add a background color, and customize the border, click the Frame tab.

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

Note: Disabling image optimization could impact page speed and or performance.

Connect a Public Business Instagram Feed

Users with a Business Instagram account (not private or personal accounts) can add an Instagram feed to the photo gallery widget. The widget displays up to 100 images from your feed, and updates automatically when new posts are added. If an Instagram post has more than one image, only the first image of that post will be displayed in the photo gallery widget.

Note

  • New image updates may take up to 2 hours to display.

  • Only photos will display (videos are not able to) and only from accounts that are public and from a Business account.

  • Only one Instagram account may be connected per site.

  • Collaboration photos are not able to be displayed.

  • To change the account, open the connected photo gallery, click Disconnect, and log in with the new account. Browser cache may need to be cleared after disconnecting and prior to trying to reconnect.

  • Clients do not need to give you user and password information. You can give clients Content editing permissions in order to log in to Instagram themselves.

To connect an Instagram feed to the Photo Gallery widget:

  1. Add the Photo Gallery widget to your site. For more information, see Add Widgets.

  2. Click Connect Instagram.

  3. Type your Instagram credentials, and click Log In.

  4. Click Authorize.

If you receive an error logging in, go to Instagram.com in your browser. On the Profile tab, click the Settings icon and select Sign-Out, and then reconnect to the widget.

Image Captions

Image Captions can be displayed when hovering on an image. To display image captions, click the Show image captions toggle on the Content tab of the Photo Gallery widget (by default the toggle is off).

You can also change the color, size, and font of the text as well as the background color of the Image Captions in the Design tab.

Note: This functionality is only available on Desktop as hover functionality is not available for mobile.

The photo gallery doesn't display my Instagram images or the photo gallery displays the wrong images

To reconnect Instagram correctly to the Photo Gallery widget:

  1. In the editor, click the Photo Gallery widget to open the Content Editor.

  2. To disconnect the widget from Instagram, click Disconnect.

  3. Close the editor.

  4. To go https://www.instagram.com/ and log out from Instagram directly.

  5. Open an incognito window, go to the editor and reconnect Instagram to the Photo Gallery widget.

My Instagram feed somehow disconnected

If your Instagram connection is disconnected, your authentication token may have expired and you need to reconnect the Photo Gallery widget to Instagram and re-authorize your credentials. To reconnect the Photo Gallery widget to Instagram:

  1. Click the Photo Gallery widget to open the Content editor.

  2. Click Connect Instagram.

  3. Type your Instagram credentials, and then click Log In.

  4. Click Authorize.

Did this answer your question?