About the Mosaic Widget

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

Open

Key features:

• Choose from 3 display styles for stories

• Select colors for elements such as backgrounds, titles, and fonts

Setup and Configuration

Add the Mosaic Widget to a Group or Application Page

1. Navigate to the relevant group or application where you want the Mosaic Widget to appear.

2. Select the Pencil icon at the top left.

   Open

   

3. Select Manage Group Theme.

4. Select Edit this Page

5. From the Widgets menu, search for the Mosaic by SE widget and add it to the page by dragging and dropping the widget onto the page.
   
   

Configure the Mosaic Stories

Stories are the main components of your Mosaic widget. Stories are the items you want to highlight on your landing page with images, copies, and links. The Mosaic widget offers a variety of options for displaying your stories and calls to action in your community. Every story can have a unique layout and configuration options. Below is a quick overview of what a story is and the main components involved. 

Elements of a Story

• Categories. Call out specific types of stories with pre-set categories. Categories may include an icon (examples: video, announcement, HR update, Urgent etc.). Categories will display either in a bubble or bar view - depending on what mosaic story style is selected.

• Likes & Comments.  For Verint content, display social data by showing the  current number of likes & comments 

• Title and Subtitle.  Introduce your story & provide context for your users. 

Story Configuration

Story Configuration Menu

1. Click Add

2. Name your Story

3. Select your Style. Choose from Fade, Classic or Flat. See “Mosaic Styles” below for descriptions of each.

4. Select your image size. Choose from the following sizes:

   • Small

   • Tall

   • Wide

   • Large

5. Select your category if desired

6. Select your color if desired

   • Note: Story color is only displayed if you are using Flat or Classic styles.

   • Note: The text color for fade stories will default to white - regardless of what theme is applied to that story.

7. Add the link for your story

   • Select Verint Content to search for content within your community. If you select this option the configuration options to include “Likes” and “Comments” will appear below

   • Manually add a url if using a link external to your community, or you are linking to Verint urls that do not include images

   • Check the box if you want the url to open in a new window

8. Choose to Enable Preview for your Mosaic Story - This enables a front end rollover/ hover preview for users on a story (see image below)

   • NOTE: This preview feature is only available for Dynamic content or Verint Community Content story types - Not MANUAL ENTRY 

   • NOTE: The preview feature in single column will get stuck if you move off of mosaic window

9. Enter your Title

10. Set a system title - this is what will display within the widget configuration. This way it is clear as to what story you will be moving, editing or deleting. 

11. Enter your Subtitle

12. Paste your Image URL if desired

    • If you chose to link to Verint Content in the link section above, the image will automatically pull from the image used in that content.  To override this (and select a new image) click the Auto button and paste in the url of the desired image.

    • Note: You must use an image address - this can be found by right clicking on your desired image and clicking copy image address

    • Note: If you do not select an image for the story, choose the Flat style to have your copy displayed over your background Color

13. Click Save Story

Save All now before moving on to the next section. Scroll to the bottom of the widget and click the Save All button.

Mosaic Story Styles

Fade

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

• Category appears in a separate color and bar view, as defined in palette

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

• No color

Fade Style Example

Classic

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

• The color block opacity is configurable opacity under Settings

• Color is configurable

• Category appears in a bar view and separate color, as defined in palette

Classic Style Example

Flat

• No image displayed

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

• The category appears in a bubble shadow

• NOTE: When using a flat style and a manual entry, text will automatically be displayed in the top left of the box:

Otherwise when using the flat style and automatically linking to a piece of content within your community it will center the text and push it towards the bottom:

Configure the Theme

Color Theme Configuration Menu

1. Click Add Color Theme

2. Name your Theme

3. Set Story Color 

   • If you are using the Flat style and do not add an image to your story this color will display as the background of that story. 

   • Note: Fade Style does not use the colors from your theme 

   • Note: If you don’t know the hexadecimal value, convert your colors at http://rgb.to

4. Set your Title/subtitle color

   • Note: Choose a color that will display on top of the Story Color set above. 

5. Set your Category band Color

   • this is the color that will be behind the Category text/icon

6. Set your Category text Color

   • Note: this will also be the Color of the category icon if used. 

7. Save your changes. Scroll to the bottom of the widget and click the Save All button. 

*Repeat the steps above to add multiple Color themes.  We recommend setting your color themes when you first set up your Mosaic, this way you can simply select from the available themes when creating your stories. 

Configure the Categories

Category Configuration Menu

1. Click Add Category 

2. Name your Category 

3. Set Icons

   • Preset icons

     • Type in the icon name 

     • Click to see the icon guide if you want to browse all preset icons: http://fontawesome.io/icons/

     • A preview of your selected icon will appear below

     • Note: the color of the icon will be the same color that was set in the Colors section.

   • Custom icons

     • Paste the icon URL into the field for any icons you have uploaded to your community

     • Note: You must use an image address - this can be found by right clicking on your desired image and clicking copy image address

   • SVG

     • Paste in the full SVG document. 

4. Save your changes. Scroll to the bottom of the widget and click the Save All button. 

*Repeat the steps above to add multiple categories.  We recommend setting your categories when you first set up your Mosaic, this way you can simply select from the available categories when creating your stories. 

Configure HTML

1. Adding a custom Header and/or Footer: This feature allows you to add custom code (e.g. a block of links, or an image) above the widget and below the widget. It supports the use of javascript as well as the use of {name}  (e.g. if you want your header to say something like Welcome {name} ).

2. Select Add Custom HTML from the widget menu. 

3. You can also lightly modify the appearance of the footer beneath the widget’s search results using HTML and CSS.

4.  Save your changes. Scroll to the bottom of the widget and click the Save All button. 

 Adding Images in Verint

1. To add images to your widget, you will first need to upload them to the community.

2. Hover over the Pencil

3. Select Administration

4. Select Site > Files

5. Upload Images from your computer

6. Once complete, click the file name, the image will open in another browser window

7. Copy the address URL for that image and paste it into a notepad, you will need these URLs when you are configuring the mosaic stories. (NOTE: This method is used when you are not using a piece of content that already has an image in it.)

Configure Fonts

1. Select Fonts from the widget menu.

2. Select a Font method from these options:

   • Basic

   • Google

   • Custom

   • Note: Default is “relative sizing” We recommend setting up a widget as a template with the desired settings, colors, etc. so that you can copy that configuration if you plan to reuse the across the community or share with your community management (place owners) team.

Font selection

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

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.

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.

Depending on what widget you are configuring there may be different sections for setting your fonts such as: title, heading, sub-heading, tabs, category etc.

When you are finished setting your fonts, save your changes. Scroll to the bottom of the widget and click the Save All button.

Configure the Advanced Settings

Advanced Settings Configuration Menu (default selections displayed)

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

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

3. Set your Hover effect

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

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

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

Details on the Hover Effect Rules:

(Acceptable range: the value that the user can specify in the configuration using the slider)

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

• None (will have rounded corners)

• Small

• Medium 

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

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

• Save your changes. Scroll to the bottom of the widget and click the

9. Set CSS Class Name. This class name is applied to the wrapper for the content, enabling targeting from custom CSS rules.

Save All button.

Publish the Page

1. Click the Publish Button in the Management Console Panel to publish your changes
   
   

    

2. Click the X in the Management Console Panel, to close the Panel
   
   

    

3. Your page will appear published with your updates

What size images should I use in MOSAIC?

MOSAIC is designed to be easy-to-use, and the way it treats images is no exception. Officially, MOSAIC does not require any specific image dimensions, and that's by design: our automatic image positioning lets you focus on content instead of spending time cropping and adjusting images.

That said, we know it's helpful to have some guidelines to work with. So let's dive deeper!

How MOSAIC sizes work

MOSAIC ships with 4 different size options: small, medium-tall, medium-wide and large. Each of these 4 sizes is calculated as a multiple of the smallest tile. For example, the medium-wide size is twice the width of the smallest tile and the medium-tall size is twice the height. Those four sizes are represented below:

Importantly, the size of MOSAIC frames also vary based on two settings in your configuration:

• The number of columns you've configured in the settings (default=5). This is defined as the number of small tiles that can fit across the full width.

• The height of the small tile, also configured in settings.

If we removed a column from the above example (from 4 to 3), the remaining frames would expand to fill the space. Notice that is also changing the aspect ratio of the frames:

Let's go a step further. If we also reduced the height of our configuration, we'd change the aspect ratio yet again. Notice that the frame in the lower right corner is now very wide and short.

So remember:

Each time you make a change to the height or column count in settings, you change the calculated aspect ratio of the frames.

How image fitting works

The size of the box you select greatly affects how your chosen image will display within the frame. Let's use this image as an example:

In every case, MOSAIC will scale the image so that it fills the entire frame. Here's how a landscape image will be positioned. Notice that the image is always centered vertically or horizontally. The red outline shows the frame of a MOSAIC story.

And here's how a portrait image might be cropped.

You should notice that there is more hidden image when the aspect ratios vary greatly — i.e., landscape images are cropped significantly in wide MOSAIC sizes, and portrait images are cropped significantly in the tall box size.

This leads us to our first rule for working with images:

Image aspect ratios should be as close as possible to the story frame.

If you selected the Mona Lisa painting as your image, and the medium-tall box as your size, it would look great! But if you switched that same story at a later point to a different size, such as medium-wide, you'd be missing a lot more of the top and bottom when MOSAIC refits the image.

That difference is stark because the Mona Lisa is an image that loses its integrity when cropped. This is because the focal point of the portrait — Mona Lisa's face — is at the top of the image. So it is more likely that it may be hidden when the image is positioned in a MOSAIC frame.

Consider instead the case of an image which is patterned or center-weighted:

These images will both work great regardless of the frame size. The crowd on the left is patterned, so any portion of the image will look great. And the image on the right of a woman meditating has its focal point — hands in the Gyan Mudra position — somewhat centered in the photo.

So our next rule is:

For more size flexibility, use center-weighted or patterned images.

Understanding fluid design

Another great feature of MOSAIC is that it can be configured to automatically expand to match the width of your community. If MOSAIC didn't do this, there would be white space around the widget when the width of one's browser was greater than the width of MOSAIC.

To support this fluid width, MOSAIC automatically expands the width of all frames to fit the community. It does this each time the page is reloaded. Below, notice that when the blue MOSAIC is widened, the frames remain the same height, but the width changes.

The wider frames get even wider, and the taller, more vertical frames, become more square. If no maximum is set on the site and a user has the site maximized on an enormous screen, this could theoretically grow to be quite wide! Luckily, Jive has a max-width property, and that can help keep your stories from looking disfigured.

This fluid property is one of MOSAIC's best features, but it also makes selecting images a little harder because the way images fit within the story frames vary by browser width.

It is unreasonable to account for extreme cases such as a user who maximizes the site on a 30-inch monitor. Our best practice suggestion is to consider three widths:

Widths to consider:

1. The minimum width of your Jive community. This is where the page will not scale any smaller.

2. The maximum width of your Jive community, if there is one.

3. The average estimated width of your Jive community. This may be based on observation or statistics. Here, you're looking to find a width somewhere in between the min and max-width, which you believe will match the average user's view.

This helps us find a "Goldilocks" width from which to estimate average dimensions.

But consider scaling up or down

Although the Goldilocks rule above may help us find an average width, there are reasons we may wish to use the same image, at the same aspect ratio, but scaled larger or smaller.

Larger images will look nicer for users who display MOSAIC at wider browser width. If the size of the MOSAIC frame is larger than the image, the image will be stretched, and this could produce pixelation or a blurring effect. Using a larger image will avoid this, but will add more load to the page.

Smaller images will appear blurry or pixelated for those browsing at larger browser widths, but will be much quicker to load on the page. If performance is a concern, using compressed and/or smaller images will make a big difference.

Ultimately, it's about balance:

Consider the tradeoff between quality and performance when scaling images.

Object-driven images

If you chose to add one, MOSAIC supports caption overlays at the bottom of MOSAIC frames. Although MOSAIC is designed for compelling photography, some wish to use graphic-driven visuals. If you add graphic or text to the image itself, always make sure that the object has plenty of clear space around it. If the frame will also have a caption, slightly offset the image toward the top.

Notice below that when the icon is large and center-weighted, it is hidden by the caption overlay. If this frame became wider, the icon may even be cut off on the top edge. On the right, however, we've left plenty of clear space around the icon and nudged it toward the top so it does not hit the caption.

 This use of MOSAIC is more advanced and may require more massaging to get right:

When working with object-driven images, leave plenty of clear space and position the object so that it is not hidden by the caption overlay.

Conclusion

Working with images in MOSAIC can be as easy as pie, but it's also easy to overthink. When in doubt, use the smallest image you can before seeing a loss in quality, and keep your focal points center-weighted for the most successful framing. If you still have questions and would like our creative team to help you create powerful visuals for MOSAIC, talk to your Social Edge engagement lead.

Best Practices and Tips

Support

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

contact@socialedgeconsulting.com