On this page

About the Mosaic Widget

The Mosaic widget for Igloo is an easy-to-use custom widget that makes communications simple and visually appealing. The driving concept behind the Mosaic Widget are "stories." Stories are the items that are arranged and displayed in various patterns in the widget. The overall effect is the widget can tell a story rather than simply offering visual links.

There are two aspects to the mosaic widget: the mosaic widget and the mosaic configuration widget. The mosaic configuration widget helps to configure a code that will be used when one goes to upload and publish the mosaic widget. The mosaic widget is what displays the widget within a certain page.

Fully skinnable and adaptable to your brand's style, the widget can be placed on your community's global homepage or any Place landing page.

The Mosaic display widget renders visual content and text in a responsive and dynamic masonry layout. Users declare the importance of each story by assigning one of the various sizes to each item; all items are then automatically arranged for best fit. The Mosaic display widget has different style options and customizable features to best match your community’s visual identity and brand. 

Key features:

1. Choose from 3 display styles for stories

2. Select colors for elements such as backgrounds, titles, and fonts

3. Preview and adjust the layout before publishing

Open

Setup and Configuration

1. Add the Integration Widgets

The Mosaic Widgets require two places in Igloo to set up:

• A place to add the Mosaic Configuration widget to manage the configuration of the stories, colors and theming.  This widget generates code that will be added to the Mosaic Widget to display 

• A place to add the Mosaic Widget to display the configuration

1. To start, Click on the Integration Widget and drag it to wherever you would like to place the mosaic tiles on the page, as pictured below.  

Open

1. To configure the widget simply click on the Edit in the top right corner of the widget, as pictured below. 

Next to find the Mosaic tiles widget, search Marketplace Integration Library > Social Edge Mosaic Widget (Configuration), as pictured below  

1. Click Update in the bottom left of the pop-up window, as pictured below. 

1. You will then be brought to a screen with the image pictured below.

   You will have an option to create a new Mosaic or edit an existing one:

1. Configuring the Widget (Generating a New Mosaic)

Before You Start 

Now that you are in the configuration panel of the Mosaic  Widget. Before you add your stories to your Mosaic  Widget, we recommend configuring the main settings of the widget 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​: 

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

• Fonts​ - define the fonts for your widget

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

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

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

a.  Adding Stories

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

To Add Images to Your Mosaic:

There are four ways to add images to the mosaic widget: 

1. If you select choose to link to Igloo content, you will have the option on the right side to choose AUTO, which automatically inputs the first image in your content into the Mosaic.
   
   If you are linking to a Blog Article, you will also see a button Use Featured Image on the right side next to AUTO. If you choose Use Featured Image, the Mosaic will use the Featured Image in your Blog Article. If you choose AUTO, it will use the first image inside your Blog Article. If you choose Use Featured Image but did not upload a Featured Image to your Blog, it will use the first image in your Blog Article.
   
   

When using the Featured Image, the story size will correspond with the Featured Image dimensions as follows:

If Small, uses featured image 1.85:1 (rectangular)
If Tall, uses featured image 1:1 (square)
If Wide, uses featured image 7:35:1 (long banner)
If Large, use featured image 1.85:1 (rectangular)

See Mosaic Image Sizing Guide for more on how Mosaic crops images.

2. Users can upload images directly to the Mosaic widget by clicking Upload an Image. After you click Upload File, a spinner will appear on the screen. Once the spinner goes away, the Save Story button will turn blue to indicate you can save your image.
   
   

3. 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 mosaic widget paste the link as pictured below. 
   
   

4. Users can upload images into a folder channel within Igloo. 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. The user has to click on the image within the folder they want and then right click on download and click copy link address (as pictured below)
   
   Note: You must use an image address - this can be found by right clicking on your desired image and clicking copy image address

1. Then, within the story section of the mosaic widget select Image URL option and paste the link. 
   
   

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

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

2. Go to the blog/ news story that you want to link to and copy that link.

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 Igloo 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 mosaics image is linked to Igloo 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 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.  Mosaic Styles 

These Mosaic Style options are listed under “Stories” and then click on the drop down arrow next to “Style”. The Three options for the 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: Color Hex Color Codes
   
   

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.
    

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

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

f.  Fonts

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

1. Title

2. Subtitle

3. Category 

1. Select ​Fonts​ from the Widget 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.  Settings

The settings section consists of how many columns to display, the height of the entire widget, the hover effects of each tile in the widget, whether each tile inside the widget has round corners, whether the carousel view is on or off, the title/subtitle text alignment, the gutter between each tile inside the widget, font smoothing, the opacity related to certain styles and the margins around the widget as a whole.

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

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

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

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

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

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

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

3. Set ​Margins​. Set extra padding between the Mosaic and other widgets if desired. 

4. Generate Code and Publish

Once you have your configuration complete you will need to generate the code and copy it to your clipboard so you can paste it into your display widget.

1. Click Generate Code

1. In the next window Click the “copy to clipboard” button 

1. In a different Browser tab, Navigate to the Mosaic Display widget

2. Go into edit mode

1. Paste from your clipboard contents into the Configuration Value area, Update and Publish.

1. Click Update and then scroll down towards the bottom of the page and click Publish Page

1. Revise an Existing Mosaic

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

1. Copy Existing Configuration code

2. Navigate to the Mosaic Display widget by clicking Edit in the top right corner of the widget. 

1. Select all and copy the widget code
    

2. Navigate to the Configuration page to revise the code

3. Edit Existing Configuration code

4. navigate to the Configuration page, click Edit Existing
   under Revise and Existing Mosaic
   
   

5. In the next window, paste the configuration value into the open field

6. Click Next

1. In the configuration panel, Edit any sections as necessary

2. Click Generate Code

• Paste New Configuration Code back into Display Widget

1. Navigate to the Mosaic Display widget

2. Paste the configuration value into the Widget Code field replacing what’s there

3. Click Update

Best Practices and Tips

Support

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

support@socialedgeoncuslting.com