Photo Board gadget

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 via the gadget to the folder. 

The gadget displaying three rows and columns of images.

Sections in this article: 

Considerations and Caveats

  • Images: The gadget supports a maximum of 500 photos in a folder or folder channel. The gadget will not display any archived photos in the 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 recommended uploading 10 or fewer images as the upload time is dependent on internet speed and file size. The user should not leave the Upload dialog window until the upload is complete. If the user closes the window during the upload process, a pending upload icon will appear in the Userbar. It will remain visible until the user selects the pending upload to view. 
  • Zoom: In 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. 
  • 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 in the platform. 
  • All gadget error messages will appear in English. 
  • The gadget supports Tooltip in all platform languages, except for the Zoom In button, Zoom Out button, and Play button which always display in English. 

Set up

Follow these steps to set up this gadget:

  1. 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. 
  2. Select the placed widget's Edit button.
  3. Under Integration Library, select Igloo Gadget Depot.
  4. Select the  Photo Board gadget from the library.
  5. 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.
  6. In the widget editor, select Update to apply your changes or Cancel to discard them.
  7. 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.

When entering a title, you do so only for your currently selected language. If your digital workplace supports multiple languages, you should select  Translation and enter a title for each supported language.

 
This field can contain a maximum of 140 characters.

Title link Enter the URL of a location in your digital workplace. Users who select the widget's title, if it has one, 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  Translation and enter a description for each supported language.

General Options
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 example.igloodigitalworkplace.com/files/images, the path would be /files/images.

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

Content Options
Setting Description
Columns per page to be displayed

Select how many columns the gadget uses to display images. Options include:

  • 1
  • 2
  • (Default) 3
  • 4
  • 5

This setting along with Height for each photo gives you the ability to control the dimensions of images in the gadget. 

Rows per page to be displayed

Select how many rows of images the gadget displays per image page. Options include:

  • 1
  • (Default) 2
  • 3
  • 4
  • 5
Height for each photo

Select the height of images in the gadget. Options include:

  • 220px
  • 225px
  • 250px
  • 275px
  • (Default) 300px
  • 325px
  • 350px
  • 375px
  • 400px
  • 425px
  • 450px
  • 475px
  • 500px

This setting along with Columns per page to be displayed gives you the ability to control the dimensions of images in the gadget. 

Photo autoplay transition interval

Select how much time is spent on each image when autoplay is enabled. Options include:

  • 1 second
  • 2 seconds
  • (Default) 3 seconds
  • 4 seconds
  • 5 seconds
  • 6 seconds
  • 7 seconds
  • 8 seconds
  • 9 seconds
  • 10 seconds
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. 

By default, this will display text that says "Photo Board". 

Display Options
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:

  • (Default) Light Mode
  • Dark Mode

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 (#000000) and white (#FFFFFF) as the default colors.

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:

  • The style sheet will take precedence over styles in your digital workplace's theme.
  • The style sheet must reside in either the same digital workplace that is using the gadget or be hosted in a service such as Azure.
  • If you are hosting the style sheet in your digital workplace, it must be located in a folder channel named files that is located at the root of your digital workplace. The style sheet can be located anywhere within this folder channel. For example: https://customercare.igloosoftware.com/files/css/stylesheetcss
  • Valid files must end with css.
Centered upload dialog

Select this checkbox to display the Upload dialogue window in the center of the Photo Box. Recommended for three or fewer displayed rows in the Photo Board. 


When unselected, the Upload dialogue window displays at the top of the Photo Box. Recommended for three or more displayed rows in the Photo Board.

Text color

Enter the color used for text inside the gadget. This does not include button text. 

Use any of the following formats:

  • Hex code: #99FF33
  • RGB value: rgb(153, 255, 51)
  • RGBA value: rgba(153,255,51,0.6)

The default value is:

  • #000000 if Choose the color scheme is set to Light Mode.
  • #FFFFFF if Choose the color scheme is set to Dark Mode.
  • The color indicated in your theme if Check to load styles from the main Igloo style sheet is selected.
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:

  • Hex code: #99FF33
  • RGB value: rgb(153, 255, 51)
  • RGBA value: rgba(153,255,51,0.6)

The default value is:

  • #000000 if Choose the color scheme is set to Light Mode.
  • #FFFFFF if Choose the color scheme is set to Dark Mode.
  • The color indicated in your theme if Check to load styles from the main Igloo style sheet is selected.
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:

  • Hex code: #99FF33
  • RGB value: rgb(153, 255, 51)
  • RGBA value: rgba(153,255,51,0.6)

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:

  • #FFFFFF if Choose the color scheme is set to Light Mode.
  • #000000 if Choose the color scheme is set to Dark Mode.
  • The color indicated in your theme if Check to load styles from the main Igloo style sheet is selected.
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:

  • Hex code: #99FF33
  • RGB value: rgb(153, 255, 51)
  • RGBA value: rgba(153,255,51,0.6)

The default value is:

  • #FFFFFFif Choose the color scheme is set to Light Mode.
  • #000000 if Choose the color scheme is set to Dark Mode.
  • The color indicated in your theme if Check to load styles from the main Igloo style sheet is selected.
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:

  • Hex code: #99FF33
  • RGB value: rgb(153, 255, 51)
  • RGBA value: rgba(153,255,51,0.6)

The default value is:

  • rgba(0,0,0,0.1) if Choose the color scheme is set to Light Mode.
  • rgba (255,255,255,0.1) if Choose the color scheme is set to Dark Mode.
  • Lightbox hover color default will always be rgba(255, 255, 255, 0.3) as the Check to load styles from the main Igloo style sheet doesn't affect the lightbox directly.
Like button color - Liked

Enter the color used for the  Like button when a picture has been liked by a user. This will affect the  Like button on both the board and in the lightbox view. 

Use any of the following formats:

  • Hex code: #99FF33
  • RGB value: rgb(153, 255, 51)
  • RGBA value: rgba(153,255,51,0.6)

The default value is #FF0000.

Like button color - Unliked

Enter the color used for the  Like button when a picture before it has been liked by a user. This will affect the  Like button on both the board and in the lightbox view. 

Use any of the following formats:

  • Hex code: #99FF33
  • RGB value: rgb(153, 255, 51)
  • RGBA value: rgba(153,255,51,0.6)

The default value is #FFFC.

Lightbox comment button color

Enter the color used for the color of the  Comment button inside the lightbox view. 

Use any of the following formats:

  • Hex code: #99FF33
  • RGB value: rgb(153, 255, 51)
  • RGBA value: rgba(153,255,51,0.6)

The default value is #FFFC.

Lightbox zoom in button color

Enter the color used for the color of the  Zoom In button inside the lightbox view. 

Use any of the following formats:

  • Hex code: #99FF33
  • RGB value: rgb(153, 255, 51)
  • RGBA value: rgba(153,255,51,0.6)

The active default value is #FFFC.

The inactive default value is #FFF6.

Lightbox zoom out button color

Enter the color used for the color of the  Zoom Out button inside the lightbox view. 

Use any of the following formats:

  • Hex code: #99FF33
  • RGB value: rgb(153, 255, 51)
  • RGBA value: rgba(153,255,51,0.6)

The active default value is #FFFC.

The inactive default value is #FFF6.

Lightbox auto-play button color

Enter the color used for the color of the  Play button inside the lightbox view. 

Use any of the following formats:

  • Hex code: #99FF33
  • RGB value: rgb(153, 255, 51)
  • RGBA value: rgba(153,255,51,0.6)

The default value is #FFFC.

Lightbox full screen button color

Enter the color used for the color of the  Full Screen button inside the lightbox view. 

Use any of the following formats:

  • Hex code: #99FF33
  • RGB value: rgb(153, 255, 51)
  • RGBA value: rgba(153,255,51,0.6)

The default value is #FFFC.

Lightbox close button color

Enter the color used for the color of the Close button inside the lightbox view. 

Use any of the following formats:

  • Hex code: #99FF33
  • RGB value: rgb(153, 255, 51)
  • RGBA value: rgba(153,255,51,0.6)

The default value is #FFFC.

Trash can button color

Enter the color used for the Trash Can button inside the Upload images dialog window. 

Use any of the following formats:

  • Hex code: #99FF33
  • RGB value: rgb(153, 255, 51)
  • RGBA value: rgba(153,255,51,0.6)

The default value is:

  • #000000 if Choose the color scheme is set to Light Mode.
  • #FFFFFF if Choose the color scheme is set to Dark Mode.
  • The color indicated in your theme if Check to load styles from the main Igloo style sheet is selected.
Style Options

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.

Appearance Options

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 from the Photo Board gadget to the configured folder. 

Gadget in photo board view and upload image dialog window.

To add an image: 

  1. Select + Add Photos.
  2. In the Upload dialogue window, select + Upload Images.
  3. Select the desired images and select Open.
  4. (Optional) Update the Title and Description for images.
  5. 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 use the <> buttons to flip through a carousel of images, press Play to automatically flip through the images, zoom in and out for a closer look at an image, like an image, or even comment. 

The gadget is lightbox view with the comments panel displayed.

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 there are no image files in the folder channel or folder.