Note:
Your organization must be subscribed to Igloo's Gadget Depot to use gadgets in your digital workplace. Contact your Customer Success Manager or email the Customer Success Team to subscribe to the Gadget Depot and get access to all available gadgets.
Use the Photo Board gadget to allow users to view multiple images at once from a folder or folder channel, like and comment on the photos, and see each image in a dedicated lightbox view. Additionally, users with appropriate permissions can upload photos directly to the folder via the gadget.
Sections in this article:
Considerations and Caveats
- Images: The gadget supports a maximum of 500 photos in a folder or folder channel. Supported file types include GIF, JPG, JPEG, and PNG.
- Uploading Images: When using the gadget to upload images to the folder, we recommend uploading 10 or fewer images as the upload time depends on internet speed and file size. The Upload dialog window must be left open until the upload is complete. If closed, a pending upload icon will appear in the Userbar.
- Deleting Images: The delete image tool in the gadget is only visible to the author of the image.
- Zoom: In the Lightbox View, the Zoom In and Zoom Out buttons are selectable if the image is at least 720px in height or 1280px in length to allow for zooming.
- Comments: The gadget only supports single-threaded comments. Profile images will display beside the comment if the user's privacy settings allow the profile photo to be seen. Comments can't be made on archived images.
- Widget Placement on Page: The gadget only supports placement in the center column on a page inside the digital workplace.
Language Support
- The gadget supports all platform languages.
- All gadget error messages will appear in English.
- The gadget supports Tooltips in all platform languages, except for the Zoom In button, Zoom Out button, and Play button, which always displays in English.
Set up
Follow these steps to set up this gadget:
- Place an
Integrations widget on a page, space, or dashboard. For more information, see Placing and setting up a widget. Here are some tips to consider when placing this gadget:
- The gadget only supports placement in the center column on a page inside the digital workplace.
- Select the placed widget's Edit button.
- Under Integration Library, select Igloo Gadget Depot.
- Select the
Photo Board gadget from the library.
- Review and make changes to the settings on the Options and Appearance tabs. You can find details about the widget's settings in the Settings section below.
- In the widget editor, select Update to apply your changes or Cancel to discard them.
- At the bottom of your page, space, or dashboard, select Publish or Save as Draft to save your changes.
Settings
Options tab
| Setting | Description |
|---|---|
| Title |
Enter a title for the widget. The title appears as a heading above the widget's contents. You should use the title to provide context to the widget and better structure a page's content by clearly denoting different sections. |
| Title link |
Enter the URL of a location in your digital workplace. If it has one, users who select the widget's title will go to this location. Whether you enter the link as a relative URL or an absolute URL does not matter, it will convert to an absolute URL the next time you edit the widget. This field can contain a maximum of 2,083 characters. |
| Description |
Enter a description for the widget. The description appears between the title and the widget's contents. You can use this text to provide information to users about the widget. When entering a description, you do so only for your currently selected language. If your digital workplace supports multiple languages, you should select |
| Setting | Description |
|---|---|
| Folder channel path for photos |
Enter the URL of a folder channel or folder to display images from. This should be the whole path after the site's domain. For example, for a folder located at When users upload images with the gadget, they will be put into this folder. Users must have at least Write access to a channel to add content. |
| Sort order |
Select the order in which photos are displayed. Options include:
|
| Reverse sort order |
Select to reverse the sort order.
This setting is not selected by default. |
| Include archived items |
Select to display archived photos. This setting is not selected by default. |
| Setting | Description |
|---|---|
| Columns per page to be displayed |
Select how many columns the gadget uses to display images. Options include:
This setting, along with Height for each photo, allows you to control the images' dimensions in the gadget. |
| Rows per page to be displayed |
Select how many rows of images the gadget displays per image page. Options include:
|
| Height for each photo |
Select the height of images in the gadget. Options include:
This setting, along with Columns per page to be displayed, allows you to control the image dimensions in the gadget. |
| Photo autoplay transition interval |
Select how much time is spent on each image after a user enables autoplay. Images will not transition unless a user selects autoplay. Options include:
|
| Name on top of the board |
Enter a title for the Photo Board. The title appears as a heading above the Photo Board's contents. You can use this title to provide context to the Photo Board or leave it empty. |
| Hide the photo description inside the lightbox |
Select to hide image descriptions in Lightbox View. |
| Hide the photo author inside the lightbox |
Select to hide author names in Lightbox View. |
| Hide the photo title from the photos on the board/grid view |
Select to hide the image title in Photo Board View. |
| Hide the copy link button from the lightbox view |
Select to hide the |
| Hide the Add Photos button from the photo board |
Select to hide the + Add Photos button. Users will not be able to upload images using the gadget. |
| Setting | Description |
|---|---|
| Check to load styles from the main Igloo stylesheet |
Select to style the gadget according to the theme of your digital workplace. This setting is selected by default. |
| Color scheme |
Select a color scheme. Options include:
If Check to load styles from the main Igloo style sheet is selected, this setting will use the theme of your digital workplace when determining the colors of the gadget. If it is not selected, the color scheme will use black ( |
| Custom CSS File |
If you are using a custom CSS file to style this gadget, enter the absolute URL of where the style sheet is located. Keep in mind the following:
|
| Centered upload dialog |
Select to vertically center gadget dialogue windows (upload, deletion, etc.) in the gadget. When unselected, dialogue windows are vertically aligned to the top of the widget. This is best used when the gadget contains at least 3 rows of images. |
| Text color |
Enter the color used for text inside the gadget. This does not include button text. Use any of the following formats:
The default value is:
|
| Button background color |
Enter the background color used for buttons with text inside the gadget such as dialogs, Add Photos button, and comment window. Use any of the following formats:
The default value is:
|
| Button text color |
Enter the color used for text in buttons with text inside the gadget such as dialogs, Add Photos button, and comment window. Use any of the following formats:
Whether the button text color needs to be updated is determined by the values entered for the setting Button background color for ease of visibility. The default value is:
|
| Background color |
Enter the background color used for Photo Board, dialogs, and comment window. This setting will not affect the lightbox background color. Use any of the following formats:
The default value is:
|
| On hover background color |
Enter the background color used for Photo Board, dialogs, and comment window. This setting will not affect the lightbox background color. Use any of the following formats:
The default value is:
|
| Like button color - Liked |
Enter the color used for the Use any of the following formats:
The default value is |
| Like button color - Unliked |
Enter the color used for the Use any of the following formats:
The default value is |
| Lightbox comment button color |
Enter the color used for the color of the Use any of the following formats:
The default value is |
| Lightbox zoom in button color |
Enter the color used for the color of the Use any of the following formats:
The active default value is The inactive default value is |
| Lightbox zoom out button color |
Enter the color used for the color of the Use any of the following formats:
The active default value is The inactive default value is |
| Lightbox auto-play button color |
Enter the color used for the color of the Use any of the following formats:
The default value is |
| Lightbox full screen button color |
Enter the color used for the color of the Use any of the following formats:
The default value is |
| Lightbox close button color |
Enter the color used for the color of the Use any of the following formats:
The default value is |
| Trash can button color (file upload) |
Enter the color used for the Use any of the following formats:
The default value is:
|
| Trash can button color (delete photo) |
Enter the color used for the Use any of the following formats:
The default value is |
| Share button color (copy link) |
Enter the color used for the Use any of the following formats:
The default value is |
Appearance tab
| Setting | Description |
|---|---|
| Class | Enter CSS class selectors to provide additional styling to the widget. For more information, see Applying custom CSS to widgets. |
| Height |
Select the height of the widget. The default value is Auto (leftmost slider position) scales the widget's height to fit its contents. You can use the slider to set a fixed height between 50px to 600px in increments of 50px. Selecting a Height other than Auto will add a vertical scrollbar to the gadget. |
Note
Your digital workplace's theme overwrites many of the settings on the Appearance tab. However, the settings listed above are usable.
Using it
Photo Board View
The gadget displays a grid of images with multiple images for quick browsing. Users can like an image or add new images to the folder that houses the gadget's images.
Adding Images
Images may be directly uploaded to the configured folder from the Photo Board gadget.
To add an image:
- Select + Add Photos.
- In the Upload dialogue window, select + Upload Images.
- Select the desired images and select Open.
- (Optional) Update the Title and Description for images.
- Select Submit.
Lightbox View
When a user selects an image the gadget will open the lightbox view, a dedicated viewing window for a single image with additional features. In this view, users can select the following options;
-
Zoom In or
Zoom Out
-
Play /
Pause to start or stop autoplay
- Enlarge the gadget to occupy the
Fullscreen of your device
- If enabled,
Copy LInk to share the URL of the image's location in the digital workplace
-
Like an image.
- Add a
Comment
- If you are the author,
Delete Photo
-
Close Lightbox View
- < and > to manually cycle through images
Troubleshooting
The gadget will be unable to display any information if any of the following conditions are met:
- No valid folder channel or folder path is provided in the gadget configuration.
- A valid folder channel or folder path was provided, but no image files are in the folder channel or folder.