On this page

Setup and Configuration

1. Add the Tile

After the tile has been installed in your community (see https://socialedgeconsulting.atlassian.net/wiki/spaces/TFJ/pages/491522), the Lightbox Mosaic 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

Configuring the Tile (Generating a New Lightbox Mosaic)

Before You Start 

Now that you are in the configuration panel of the Lightbox Mosaic Tile. Before you add your stories to your Lightbox Mosaic Tile, 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 stories. 

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

• Layout (Behavior) - choose between a linked content layout or a popover layout 

  • Linked Content will bring the user to that specific content page 

  • Popover Layout will present users with a pop-up display of the content and will not bring them to another page. 

Note: See the image on next page for a preview of different layouts.

• Advanced Settings​ - set your tile height, gutter width, etc. 

• Fonts​ - define the fonts for your tile

• Categories​ - determine your main categories, so they can be selected as needed 

• 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 Lightbox Mosaic.

a.  Adding Stories

1. When you Add a new story, you can either add a title, subtitle, link, and associated image or search through the community and select Jive content. You can select the size and shape of each story to emphasize story importance or general layout preferences.

To Add Images to Your Lightbox Mosaic:

There are two ways to upload images to the Lightbox Mosaic tile: 

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 story section of the Lightbox mosaic 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.

1. Then, within the story section of the Lightbox Mosaic tile paste the link. 

Link To: What do you want the story in the Lightbox mosaic to link to? If you want it linked from something previously published in Jive

1. Click on the drop down menu highlighted below and select Jive content. 

2. Search for the piece of Jive content that you want to link and select that option.

If you want a third party or outside source

1. Click on the drop down menu highlighted below and select Manual entry. 

2. Copy the website URL desired and paste it underneath the link to where it says URL. 

Open in New Window: If you want a separate window (webpage) to open once a user clicks on a link, then make sure to click on the check-mark box next to “open in new window”. 

NOTE: Native Jive content will pull in the image from the content posted, if there is one, and can also display the number of likes and comments that piece of content has received, as a measure of engagement

NOTE: If a Lightbox Mosaic image is linked to Jive content it will automatically display the first photo on file unless a photo is manually added. 

1. You have the options to customize the color theme, Category headings that can be applied to specific content, the fonts used, and the size and shape of the Lightbox Mosaic 

Additional Story Features: 

Reorder Stories​: You can drag your stories to adjust how they appear on the screen. The Preview above will update as you reorder your stories, add new stories or edit story styles. 

Preview​: As you add in your stories they will populate the Preview section at the top of the configuration screen. you can see a preview of how the stories will be laid out, and have an option to drag and drop them to create the pattern you desire

b.  Lightbox Mosaic Styles 

These Lightbox Mosaic Style options are listed under “Stories” and then click on the drop down arrow next to “Style”. The Three options for the Lightbox mosaic styles include: face, classic, and flat. Pictured below are all three styles as well as examples of how each one looks. 

Fade

• A smooth, shaded overlay is added over the bottom of the image

• White text is displayed on the faded darkened area, and the opacity can be adjusted in Settings

• No color

Classic

• A solid color block is overlaid at the bottom of the image

• The color block opacity is configurable opacity under Settings

• Color is configurable

• Category appears in a separate color, as defined in the palette

Flat

• No image displayed

• Background of the story is a solid color, as defined in the palette and specified in story settings 

• Category appears in a bubble shadow

c. Color Theme

1. Click ADD COLOR THEME to add color themes to use in multiple areas of each story box. To find specific colors for background color, title/subtitle text color, category brand color, and category text color use this link: https://www.color-hex.com/
   
   

2. To delete a color theme, simply click the trash can on that row item, and then select the YES button. You will have a chance to CANCEL this action one time.
   
   

3. Popover theme. This section is dedicated to the story popover that appears when a user clicks on the story.
    

d.  Categories

1. Click ADD CATEGORY to create a new Category.

2. Add the name

3. Select an Icon or add your own: 

   1. Preset Icons > Select from the Dropdown list

   2. Custom Icons > provide the URL of the location of the icon file
      (NOTE: Make sure the file is in an open group for all to see.)

   3. SVG File > drop in the full code to display the icon

To search and view all preset icons, click on “Icon Guide”.

e.  Add Header

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

1. Click Add Header. Add raw CSS and HTML to have it display above the Lightbox Mosaic Stories.
   
   

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

f.  Fonts

For Lightbox Mosaic you will choose the Fonts for each of the main text options that display in Stories:

1. General - Will affect the font of the general body text of content pieces

2. Title - Will affect the font of the content titles

3. Category - Will affect the font of the category fonts (ex. in the picture:  LEARNING)

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” 

g.  Advanced Settings

The settings section consists of how many columns to display, the height of the entire tile, the hover effects of each tile in the tile, whether each tile inside the tile has round corners, the gutter between each tile inside the tile, font smoothing, the opacity related to certain styles and the margins around the tile as a whole. (see next page for image) 

1. Set your ​Column Count. ​The column count is the number of small tiles that can span the full width of Lightbox Mosaic.

2. Set your ​Height​. The height is equal to the height of a small tile. The height of the taller tiles is calculated as a multiple of the small tile. 

3. Set your ​Hover effect

1. Focus (default): When you mouse over one story, it will remain in focus while the other stories in the tile will go out of focus

2. Shadow: When you mouse over one story, a faint shadow around that story will appear

3. Opaque: When you mouse over a story, the opaque color under the story caption will change

Details on the Hover Effect Rules:

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

1. None (will have rounded corners) 

2. Small

3. Medium

4. Large 
   
   

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

6. Font Smoothing​. This is an advanced setting that smooths type at the pixel level. Text may appear thinner on some browsers.

7. Mobile / Narrow Column Display. This setting defines the layout for the mobile view and narrow column. You can choose List or Slider layouts.

8. For the Slider layout, you can set the Slider interval and Slider transition.

9. Set ​Caption Opacity​. Set the opacity on the caption background for your stories by dragging the slider to the desired opacity percentage.
Note: You can set this for the Classic and Fade styles only

10. Set ​Margins​. Set extra padding between the Lightbox Mosaic and other tiles if desired. 

Revise an Existing Lightbox Mosaic

To revise an existing Lightbox Mosaic is a three-step process. You will have to navigate to the Lightbox Mosaic Display 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 Lightbox Mosaic Display tile. Follow the steps below.

1. Copy Existing Configuration code

2. Ensure that you have the configuration code of the older version of the lightbox mosaic copied and stored for safekeeping. To do so: 

3. Click on copy to clipboard as highlighted above.

Edit Existing Configuration Code

1. Edit Existing Configuration code

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

3. Click on apply 

4. From there you can make any changes to that existing lightbox mosaic 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

Mosaic Image Sizing Guide