Mosaic

Add a lively and dynamic wall of color, photos, and videos to your site with a Mosaic App.

Mosaic transforms user-generated content into a dynamic wall of color and photos, by displaying the latest uploaded and social media content in a uniform grid format.

Site visitors can hover over a mosaic card to display text and other content information. Mobile and non-mobile users can expand a card to see a larger image, share content, and play video. As new items become available, old items are removed and placed back in the queue to form the perfect grid.

About Mosaic

Mosaic displays the latest Livefyre and Stream content in a uniform grid display. To create a more seamless visual experience, content information is displayed only on mouse-over. As new items become available, old items are removed and placed back in the queue.

What kind of content can I publish in a Mosaic?

Supported content containing:

  • Photos
  • Videos
  • Audio

Supported content sources:

  • Twitter
  • Instagram
  • Facebook
  • YouTube
  • RSS
  • Tumblr
  • Livefyre
  • Weibo

You cannot publish content containing text only to a Mosaic unless it is part of a photo or video post.

How does a site visitor see content in a Mosaic?

A site visitor sees content populated into a Mosaic from Studio from a Studio Stream or Social Search. If new content is published to the app while a site visitor is on the page, the new content displays immediately and pushes the old content down in real time without a user having to refresh their page.

What happens when a site visitor clicks on an item in a Mosaic?

  • On a desktop you can hover over the card to flip it and show an expand icon. Click on the expand icon to view a larger image, watch a video, or see multiple media items in the content.
  • On a mobile device you can click on a card to view a larger image, watch a video, or see multiple media items in the content.

Can a site visitor share content from a Mosaic?

Yes. A site visitor can share all content types on a Mosaic:

  • On a desktop, hover over the card, then click the share icon.
  • On a mobile device, click on a card to open it and click the share icon.

How often do the pieces rotate through the cards?

One new piece of content is added every 10 seconds.

How does new content get added to a Mosaic?

Add content to a Mosaic by:

  • Publishing manually from Library.
  • Setting up a stream to publish automatically.
  • Using the upload button, if enabled.

How does text only content show in the app?

Mosaic does not display text-only content. Mosaic displays images and videos only.

Why do I sometimes I see gray boxes in a Mosaic?

Mosaic works best with a collection that constantly has new content. If your App has less than 25 pieces of content, you will see gray boxes to make up the additional spots. Fill the Mosaic up with more content to prevent the gray boxes from displaying. Plan to put at least 32 pieces of content in the App for it to display as designed.

Why does some of my content not show up on my site even though the content displays in Studio?

Mosaic displays content in a perfect grid. If you have 25 pieces of content, your container width must fit five pieces of content for all 25 pieces of content to appear: five across and five down.

If your container width only fits four to make a perfect grid, but you have 25 pieces of content, Mosaic classifies the extra one piece of content as an outlier and does not display it in the App. The one outlier piece of content does not rotate in because technically it is on the app, but not displayed. If your container width fits seven, only 21 will show, since four are outliers and will not form the perfect grid.

Sometimes content doesn’t display because you turned on Require rights. If you turn this on, you are required to have rights granted for all content in the App. If the rights status is not “granted” for a piece of content, it will not display in the App.

Create Mosaic Using Studio

You can create all Apps in Livefyre Studio the same way. See Creating Apps for details on how to create a Mosaic App in Studio using the standard process.

Localize a Mosaic

Localization is available for Mosaic. You can:

  • Change strings available for Mosaic
  • Create and modify a translation set for Mosaic
  • Apply a Translation Set to a Site
  • Apply a Translation Set to a Network

On this page