> ## Knowledge Base Index > Fetch the complete knowledge base index at: https://support.uplisting.io/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). # Widgets: Photo Gallery # 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.](https://support.uplisting.io/docs/dynamic-content-display-and-navigation-options-for-collection-records) > **📘 NOTE** > For image guidelines, see [Media Guidelines.](https://support.multiscreensite.com/hc/en-us/articles/27338176186519-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. 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.](https://uplisting.crisp.help/en/article/media-manager-libraries-and-pickers-hh1vow/) ### 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. 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://uplisting.crisp.help/en/article/widgets-library-and-overview-1918cmc/) ### 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.](https://help.instagram.com/138925576505882?helpref=faq_content) /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: 1. Add the Photo Gallery widget to your site. For more information, see [*Add Widgets*.](https://uplisting.crisp.help/en/article/widgets-library-and-overview-1918cmc/) 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*.