Widgets: Photo Gallery

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 Professional 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. For more information, see Display Navigation Options for Collection Records.

📘
NOTE
For image guidelines, see Media Guidelines.

Content Editor

The Content area is where the content for the widget can be managed.

To access the content editor, right click the widget and select Edit Content. Or, if you are in flex mode
or Editor 2.0, the option to access the content editor is available in the floating menu. Click the element
to open the floating menu, then click the option for the content editor.

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 a Professional Instagram account (only images will display, posts with videos will not be visible). Professional Instagram accounts include both Business or
Creator accounts.
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
For additional information, see Media Manager, Libraries, and Pickers.

Individual Image Setting Options

Click on an image to bring up its setting options.

Replace Image.
Edit. Change image properties by using the image editor.
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 icon. If there is no text entered, but it's left
visible, space will remain in the widget and be visible.

📘
NOTE
The long text field provides various text formatting options, such as italicizing, bolding, or underlining text.

Button. If a button isn't desired, click the eye icon to hide it.
Alt text. Type your own alt text or click the Sparkle icon to use the AI Assistant to generate alt
text. Repeat for each individual image in the Photo Gallery or click All Alt Text to view and manage alt
text for all site images. The Sparkle icon will be disabled if an image is not selected.

📘
NOTE
Alt text generated by the AI Assistant is in the same language as the page’s current
language.

Design Editor

To access the design editor, right-click the element, and click Edit Design. Or if you are in flex mode
or Editor 2.0, select Edit Design from the floating menu to open the design panel. Click the element to
open the floating menu, then click the option to edit design.

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.

For information about design options that are not specific to this widget (for example, layout, style, or
spacing), see Widget Design

Connect a Professional Instagram Feed

Due to a change made by Meta, any connections made before December 2024 will need to be
re-connected.

Users with a Professional 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 display in the photo gallery widget.

*Professional Instagram accounts can be set to either Business or Creator. Learn more about Professional Instagram accounts.

/callout

📘
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
Widget content permissions in order to log in to Instagram themselves.

To connect a Professional 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

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.

Troubleshooting

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:

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.

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:

Click the Photo Gallery widget to open the Content editor.
Click Connect Instagram.
Type your Instagram credentials, and then click Log In.
Click Authorize.