Skip to Content

Mosaic Filtering

With the mosaic section type, you are able to build out a set of cards and add filters to the set. This allows the user to have filtered content for specific use cases. 

Some example use cases:

  • Audience-based content

  • Faculty/staff or team member filtering (good example here)

  • Content filtered by subject
    • Example: news and events
    • Subjects within a college

Visual examples provided below.

Best Practices

  • This content type can be a good way to send a user to another related page by making the image card into a clickable link.
  • You can choose what aspect ratio you would like to crop your images to. Crop image cards to the same size if possible.
  • Plan what content you would like to filter before you start building this section. You will need to know what your defined filters are going to be. 
  • It looks best if you choose consistent caption background colors for all of the cards that are tagged to one filter. However, let your content drive that decision. 
  • If you are using two or more image cards in columns next to each other, try to keep all captions the same length. Longer captions mean longer image cards, even if the images themselves have been cropped to the same size.

Avoid

  • Don't use photos or graphics with text on them. Instead, put that content in the caption. 
  • Avoid using multiple caption background colors next to each other (example: maroon, gold and charcoal all in a row).
  • Don't choose to show the "all" filter if it doesn't make sense for the content that you are displaying.
  • Avoid long caption text on your image or video cards. You have a maximum character limit, but you don't have to reach it. 

mosaic settings dialog box

How to use Mosaic Filtering

Step 1: Mosaic Settings

  • On your page in Gato, select "add section" and choose "mosaic layout" 
  • Then you will see the dialog box where you can adjust your settings. 
  • You have an optional "title" that can be aligned left or centered 
  • You also have a choice of small, medium, or large-sized cards, and depending on your choice, you will be able to have up to 4 columns in one row. 
  • Image cropping drop-down: Here you can choose how you want your images to crop. If you choose no cropping, your cards will all be different sizes. We suggest choosing one of the automatic cropping options, unless you plan on cropping all of your images yourself and having similar lengths of captions. 
  • You can choose to have a background color by checking the box at the bottom of the dialog box.
dialog box in gato for how to add filters

Step 2: Click on the filter tab at the top and you will be prompted to type in up to 5 filter names.

  • Plan what you would like your filters to be before you input them. They can only be up to 20 characters long, so you must be strategic and choose short and concise filter names.
  • If you try to enter more than 5 filters, the system will not allow you to do so and will prompt you with a warning message.
  • You may reorder the filters by clicking the arrow tabs next to the filter name. The order of the filters here will match the order of the filters from right to left in your preview view after you save your changes.
  • You must select the box to "Enable filter tabs" if you would like the filters to display and work.
  • You can also choose to add an "all" filter to the tabs list, but only do this if it makes sense to have all cards displayed at one time. Your use case will determine if you need to have that filter or not.

Note: You can go back to your settings or the filter tab at any time to adjust your settings or add/remove filters once you start building your mosaic section. 

settings for the image card in Gato

Step 3: Start building your cards

  • Choose "Add card" and choose from an image card, video card, or an RSS feed card. 
  • You will be able to choose your caption background color for the video or image cards.
    • RSS cards will have no color choice and will be automatic. 
  • Caption titles can be up to 95 characters, but short and concise is best. Caption text can be up to 206 characters and should be strategically written. 
    • Users will not likely read lengthy captions.
    • The purpose of this area is to write content that will ultimately get the user to click on the card and take them to the page where you want them to go. 
settings view for choosing a filter in Gato

Step 4: Tag your cards to the correct filter

  • After you finish filling out the necessary content on your card of choice, you can choose the "tags" tab at the top. This is where you select what filter this card will be assigned to.

  • You may also select more than one filter if it makes sense for your card.


Examples of How to use Mosaic Filtering

Mosaic Layout – Large (Up to two columns on desktop)

  • These image cards are cropped to 4:3 landscape.

Mosaic Layout – Medium (Up to three columns on desktop)

  • These image cards are cropped to 1:1 square. 

Mosaic Layout – Small (Up to four columns on desktop)

  • These image cards are cropped to 3:2 landscape.