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 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.
Dynamic Content
This widget can also display dynamic pages.
Note
The Content area is where the content for the widget can be managed.
Gallery Setup Options
-
To enable links on gallery images, click the Enable links on gallery images toggle at the top of the content box.
-
This disables the lightbox feature. If an image doesn't have a link, nothing will happen with the image is clicked on.
-
-
Click Connect Instagram to connected to an Instagram Account (only images will display, posts with videos will not be visible). Instagram account needs to be public.
-
Click Add image to add images (multiple can be selected at the same time to be added to the gallery). The following are available options:
-
Select from the immediately available images.
-
Click Full View to open the Image Picker.
-
Click the plus icon to upload an image.
Note
-
Individual Image Setting Options
Click on an image to bring up its setting options.
-
Replace Image.
-
Edit.
-
Position. Adjust which part of the image shows.
-
Edit Link. This will only be visible if the Enable links on gallery images setting is on. If a link isn't set, nothing will happen when the image is clicked on.
-
Title. If a title isn't desired, click the eye (
) icon. If there is no text entered, but it's left visible, space will remain in the widget and be visible.
-
Description. If a description isn't desired, click the eye (
-
Button. If a button isn't desired, click the eye (
-
Alt text. Type your own alt text.
-
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 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.
-
-
To configure images, click the Images tab. You have the following options:
-
Change the image height and spacing between the images (for all images in the gallery). This is only applicable for certain layouts.
-
Add rounded corners.
-
Display the full image on the gallery.
-
Add shadow.
-
Change the image hover effect and animation (available in new widget).
-
Disable image optimization.
Note
Disabling image optimization could impact page speed and or performance.
-
-
To configure the frame (for instance add a background color or customize the border), click the Frame tab.
-
To turn off Lazy loading click the toggle (this is on by default to assist with page speed by only loading images when they become visible on scroll).
-
To hide the share option, click the Hide share images toggle. This removes the share button users see when clicking an image.
-
-
To change the inner and outer spacing, click the Spacing tab.
Users with a public Instagram account (not private 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 display 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.
-
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:
-
Add the Photo Gallery widget to your site. For more information, see Add Widgets.
-
Click Connect Instagram.
-
Type your Instagram credentials, and click Log In.
-
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 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.
To reconnect Instagram correctly to the Photo Gallery widget:
-
In the editor, click the Photo Gallery widget to open the Content Editor.
-
To disconnect the widget from Instagram, click Disconnect.
-
Close the editor.
-
To go https://www.instagram.com/ and log out from Instagram directly.
-
Open an incognito window, go to the editor and reconnect Instagram to the Photo Gallery widget.
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: