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

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. 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 in the platform. 
  • 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:

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

Sort order

Select the order in which photos are displayed. Options include:

  • (Default) Created (newest to oldest): The date the photo was created.
  • Number of Likes (most to least): The amount of likes each photo has.
  • Published (newest to oldest): The date the photo was published.
  • Modified (newest to oldest): The date the photo was modified.
Reverse sort order

Select to reverse the sort order.

  • If the Sort order is Created, Published, or Modified, photos are ordered from oldest to newest.
  • If the Sort order is Number of likes, the photos are ordered from the highest amount of likes to the least.

This setting is not selected by default.

Include archived items

Select to display archived photos.

This setting is not selected by default.

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, 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:

  • 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, 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:

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

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  Copy Link button in Lightbox View.

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.

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

  • 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 (file upload)

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.
Trash can button color (delete photo)

Enter the color used for the Trash Can button 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.

Share button color (copy link)

Enter the color used for the  Copy Link button 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.

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

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

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