Listings

A listing is a curated set of links which provides your website's visitors with preview information about the linked content.

In Mosaic each listing link is known as a 'listing item'. Listing items are styled using a range of 'item styles' which allow you to show images, text and metadata about the content represented in each item.

Listings are a useful way to highlight themed content to your website's visitors and can be used to complement your site's navigation structure.

Example uses of listings

Using a listing on a landing page to signpost deeper-level content pages:

Using listings in secondary regions of content pages to highlight related content:

For more examples of listing widgets see the Mosaic Pattern Book or browse a selection of existing Mosaic websites to see how they have implemented listings.

Listing widgets

Listings are created using widgets which are tailored to this task. Listing widgets include:

How to create a listing

  1. Decide which listing widget to use and which page region to put the widget in. See the Mosaic Pattern Book for examples of listing widgets and how to configure them, or browse some Mosaic websites to get ideas of how to lay out listings. Also see the documentation about widgets.
  2. Choose a content source to populate the widget with listing items. See the information about using listing widget content sources below.
  3. Configure the appearance of the listing using its 'Layout options'. The layout options include the option to select the item style the listing will use, the number of items the listing displays on each page, the ability for visitors to see multiple pages of listing results, and more. See the Mosaic Pattern Book for examples of the options included in listing layouts. See the Widgets documentation for the item styles available for each widget. 

Using content sources in listing widgets

Content sources are used to populate listings with items that represent content. There are four content sources to choose from:

  • Filtered content. Set the listing to display listing items for pages on your site based on the following metadata:
  • Selected content. Hand pick the pages from your site that you want to display in the listing
  • Static content. Build each listing item by supplying an image, text and a URL to link the item to. Static content can be used to link listing items to pages on other websites
  • Feeds. Display content from an RSS or OxTalks feed using the listing widget

Content filtering allows Grid listing, List listing, Carousel, and Slideshow advanced widgets to display items automatically based on Content type and subtype, associated Taxonomy terms, or a combination of these.

filtered content source - content type selected
  • Filter by content type (1). Pages belonging to the selected content type will be displayed in the listing
  • Filter by content sub-type (visible once content type is selected) (2). Pages belonging to the selected content subtype will be displayed in the listing
  • Taxonomies associated with the selected content type (3). Pages with the selected taxonomy terms associated with them will be displayed in the listing. One term can be selected per taxonomy
  • Choose to display taxonomy filters to end users (4). Taxonomy filters can be displayed to end users (e.g. below), for them to use the listed pages' associated taxonomy terms to filter for topics of interest
taxonomy filters example

Output on a Mosaic site: Taxonomy filters displayed above a Grid listing

 

If you insert a listing widget on an Events page, for example, and select Filtered as the content source, you have the option to exclude the Events page which will host the listing widget from the displayed items. Select the check-box called Exclude current item:

Screenshot of edit widget showing filtered content option checkbox to exclude current item

  1. Type the title of the page you want to list into the text input field
    selected content input field
  2. The autocomplete process will display all pages matching the input text in a dropdown list
    selected content input example
  3. Select the page you want from the dropdown list
  4. To add another page to the listing, click 'Add another item' to display a new text input field

Distinguish between duplicate page titles

Because the dropdown list displays pages' titles only, it can be difficult to distinguish between pages with the same or similar titles. When one of the pages is selected, the page's 'node ID' is displayed in parentheses after the page tile. Each page has a unique node ID which can be used to distinguish pages. To find a page's node ID:

  1. go to Manage Content > Content tab
  2. use the Title text field to filter for the page title
  3. hover your cursor over the 'Edit' button for the page (1)
    finding a page's node ID
  4. in the bottom-left corner of the browser window the link to the editing area for the page will appear. This contains the text 'node/[number]' (2). The [number] element is the page's node ID

Change the order of selected listing items

To reorder pages displayed in the listing:

  • use the multi-directional arrow within the listing item to drag-and-drop it into a new position in the listing order:
    reordering selected content items

Static content allows you to create each item in a Grid listing, List listing, Slideshow (advanced), Carousel, or Banner from scratch. The static content interface (below) lets you build each item by supplying text, images, and URLs. This method of populating widgets allows external URLs to be used.

static content interface
  1. Listing item configuration options
  2. Static item title. This text will be output in the 'Title' text region of the item style that is used
  3. Category/subtype. The content subtype of pages displayed in Filtered and Selected listings can be optionally exposed (depending on the item style used). The Static content source features a 'Category/subtype' field which mimics the exposed subtypes of Filtered and Selected content listings
  4. Image. The image will be displayed in the selected item style, if the item style includes an image field. See the widgets documentation for information about the item styles available to each widget. See the Mosaic Pattern Book for examples of item styles in use
  5. Link. Add a URL to the item. This can be to a page or file on your site or an external URL
  6. Text. This text is output in the 'listing text' region of the item style
  7. Call to action. Some item styles support the addition of Call to Actions/Labels
  8. Use Call to action or Label? Display the Call to Action as a clickable Call to Action (using the supplied URL) or as a Label (no link is created; the Label can be used for promotion of the item)
  9. Promoted / Double width. (For Grid listing items only) choose whether the Grid listing item occupies twice the width of a normal grid item to make it more prominent to your website's visitors

See the Feeds documentation to find out how to display RSS and OxTalks content in listing widgets.

On this page