> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.blab.co/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# Media Widgets: Photo Gallery

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 and Navigation Options for Collection Records](https://intercom.help/book-like-a-boss/en/articles/10378990-dynamic-content-display-and-navigation-options-for-collection-records).

**Note**

For image guidelines, see [Media Guidelines](https://intercom.help/book-like-a-boss/en/articles/10390919-media-guidelines-and-specifications).

# 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.

### 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**

For additional information, see [Media Manager, Libraries, and Pickers](https://intercom.help/book-like-a-boss/en/articles/10390990-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](https://intercom.help/book-like-a-boss/en/articles/10386803-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.

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 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 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.

3. 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.

4. 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](https://help.booklikeaboss.com/en/articles/10353857-widgets-library-and-overview#h_bd5957206f).

### 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 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 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](https://help.booklikeaboss.com/en/articles/10353857-widgets-library-and-overview#h_45d573b76d).
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](http://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:

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/](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**.