On this page

Setup and Configuration

Add the Tile

After you’ve installed the addon (see https://socialedgeconsulting.atlassian.net/wiki/spaces/TFJ/pages/491522 ), the Lightbox Image Gallery Tile requires one place in Jive to set up:

Add a new page to the place

• Navigate to the group, space or project

• Click Manage > New Page.  If you do not see this option you cannot manage this place

Open

• A window will appear asking for the page name (required) and the layout you wish to use.  Each layout will have a set number of tiles available to it.

  • Layout 1:  Four large tiles full screen

  • Layout 2:  Four large tiles located on the left side, 12 small tiles on the right

  • Layout 3:  12 small tiles on the left, four large tiles on the right

  • Layout 4:  6 small tiles on the left, four large tiles in the middle, 6 small tiles on the right

Open

1. Choose the layout that works for your place and enter the name of your page.

Click the ok button when done

Add tiles to the new page

• If continuing from the previous section you can start adding tiles.  If you exited the new page configuration click the “Edit page” link above the Manage menu to reopen the configuration

• Click the “Add a tile” link in any of the spots available

• A dialog will appear with different tile categories on the left, select the category for the list of available tiles it contains

• Select the desired tile and it will be placed in that location.  Some tiles will allow you to edit certain runtime properties while others will be auto populated.  If run time properties are available it will open a configuration window for that tile as soon as you select it.

• Tiles can move up and down in the column they are on, but not left and right

• Once you are finished editing the page click the Save button in the lower left corner

1. Configuring the Tile (Generating a New Image Gallery)

Configuring the Tile

Before You Start 

Now that you are in the configuration panel of the Image Gallery. Before you add your stories to your Image Gallery, we recommend configuring the main settings of the tile first. This will allow you to simply select from your preset configuration options (e.g. categories, color palette, etc.) when you are adding your image gallery. 

Below are the settings we recommend you configure ​first​: 

• Settings​ - set your rounded corners, gutter width, etc. 

• Fonts​ - define the fonts for your tile

• Color Theme​ - set your brand colors for use on the tile

• Upload your images​ - if you have your images ready, upload them via Static Resources now and have the URLs ready

Setting these first will make it easy for you to quickly add the elements to your stories. See sections 1.5 - 1.11 below for details as well as images on each configurable section of the Image Gallery.

1. Adding Images

1. When you Add a new image, you can either add a title, subtitle, and associated image URL. 

To Add Images to Your Gallery:

There are two ways to upload images to the Image Gallery: 

1. Users can go online and search for images, either using google or Unsplash (contains free, downloadable images). Once a picture has been found, right click and click on the copy image address/copy image URL. Then within the image section of the image gallery tile paste the link as pictured below. 

2. Users can upload images into a folder channel within Jive. There are two ways to do this. Tip: In order for everyone to access these images it is recommended to create a public folder and place the folder in a public place.

   1. From Pencil icon → Select Files

   2. From Actions → Select Files

Select Click to select files to browse to the image or drag and drop the image file.

Note: You can upload multiple images at once. To bulk upload, simply select or drag and drop multiple files before moving onto the next step.

Add tags and categories to your image.

Note: If you are uploading multiple images at once, any tags and categories you select will be applied to all images you are currently adding.

Your image will automatically display in any collections that are gathering the tags and categories you selected. It'll also appear in the All Images collection.

To add an image to a collection, add a matching tag or category to the image and to the collection.

b. Theme

1. Click THEME to add a color theme to use in multiple areas of the image gallery. To find specific colors for Image background color and Image text color use this link: https://www.color-hex.com/

2. You can set up the Caption hover effect, Caption color, and Caption opacity. This effect applies to the image which a user hovers over.

3. Additional hover effect applies to all the images in the tile except the image which a user hovers over.

4. In the Flat mode of the Caption Hover Effect, you can set the Caption text color to be automatic or set it up manually.

c.  Settings

The settings section consists of how many columns to display, the max height of the entire tile, whether each image inside the tile has round corners, the gutter between each image inside the tile.

1. Set Column Count. You can choose the number of columns the images will be divided into.

2. Set ​Rounded corners​. To give your images rounded corners, simply set the border-radius from the options in the drop-down:

   1. None (will have no rounded corners) 

   2. Small

   3. Medium

   4. Large 

3. Set Max Gallery Height (px). This value will help you to get rid of the unnecessary scroll in your tile or make it take less space on the page. Add all your images to the tile and set up the maximum height for the tile frame.

4. Set ​Gutter​. The gutter is the gap between the stories. If you set this to “0” the stories will be flush against each other.

d. Custom HTML

This feature allows you to add custom code (e.g. a block of links, or an image) above the tile.

1. Click Add custom HTML. Add raw CSS and HTML to have it display above the image gallery. There are options for custom code above the tile as well as below the title.

1. Here’s an example of what that CSS and HTML change looks like in this Image Gallery example. The greeting is added to the top of the Image Gallery Tile. You can see this before you generate the code in the Preview section under the Stories above.

e.  Fonts

For an Image Gallery you will choose the Fonts for each of the main text options that display in Stories:

1. Font Family 

2. Title - Will affect the font of the general body text of content pieces

3. Subtitle - Will affect the font of the content subtitles

4. Description - Will affect the font of the description (displays once the image is clicked on) 

1. Select ​Fonts​ from the Tile menu.

2. Select a Font method from these options:

   1. Basic Font: Choose from the browser default fonts (serif, sans-serif, cursive, and monotype) and global web-safe fonts used in your Jive community. If you select a Basic font, you can also configure the script type (Bold, Italic, etc.).

   2. Google Font​: you can select a font from those provided by Google. Begin typing to search for a specific Google font. Browse and preview the Google Fonts database here: ​Google Fonts​.

   3. Custom Font:​ you can import your own custom font by supplying hosted links to your font files. For cross-browser compatibility, please specify at least a woff or TTF font file. Note: You are responsible for licensing and paying for that font. 

Note: Default is “relative sizing” 

Revise an Existing Image Gallery

To revise an existing Image Gallery is a three-step process. You will have to navigate to the Image Gallery tile, copy the code from there, then navigate to the Configuration page to revise the code, and once revised you will need to paste the code back into the Image Gallery tile. Follow the steps below.

Copy Existing Configuration code

1. Ensure that you have the configuration code of the older version of the Image Gallery copied and stored for safekeeping. To do so: 

Click on copy to clipboard as highlighted above.

Edit Existing Configuration code

1. Navigate to the Configuration page for the tile, click Migrate Configuration and under the “ADD NEW CONFIG”  tab paste the existing configuration code that you had set aside for safekeeping.
   
   

2. Click on apply 

3. From there you can make any changes to that existing Image Gallery just as you normally would 

Best Practices and Tips

Support

Need support or want to talk to us?  Please send an email to:

support@socialedgeoncuslting.com