Widgets Overview

A widget is a small block of functionality which creates a specific piece of content on a page. There are 21 widgets in the Mosiac toolkit, which can be used to create a variety of features on pages and in the site footer.

Expand All

Widgets provide useful and attractive content for web end users. As a result, they're a key part of the editing process for pages and footers.

From a content editor's perspective, the editing process will often include:

  1. Choosing one of the 5 page/footer layouts
  2. Deciding which layout region to add a widget to
  3. Adding the widget to the page/footer region
  4. Configuring the widget using its editing options

The Mosaic toolkit contains 21 widgets; they are divided into 6 categories.

Widget category Widget Widget description
Authoring widgets What-You-See-Is-What-You-Get (WYSIWYG) content area A text editor, into which images and other media can be embedded
Accordion content Breaks text into collapsable sections
Tabbed content Breaks text into overlapping, tabbed sections
Advanced Authoring Advanced accordion Allows any widget(s) to be placed into collapsable page sections
Advanced tabbed content Allows any widget(s) to be placed into tabbed sections
Banner A large visual imapct page element for displaying an image and text
Reusable content Creates a container for a widget(s) with a specific configuration to be reused in multiple parts of your site
Listings Grid A grid layout of items linking to other pages, which uses preset visual styles
List A list of items linking to other pages, which uses preset visual styles
Publications listing Displays publications for one or more Oxford users by drawing publications metadata from Symplectic Elements
Vacancy listing Displays job vacancies for University units by drawing data from the HR system
Galleries Carousel A side-scrolling set of items linking to other pages, which uses preset visual styles
Image gallery A set of square thumbnail images, which can be clicked on to open larger versions of the images in a lightbox
Image gallery advanced A gallery with a large, scrolling preview panel and optional thumbnails
Slideshow advanced A large visual imapct page element for displaying multiple panels containing images and text
Forms Form Outputs an advanced webform on the page
Simple feedback form A form for web end users to submit one block of text and their email address
Other Metadata display Outputs the information entered into a page's metadata (e.g. Event date and location; Article author and publication date; Person affiliation and biography) on the page
Share on social media Displays Facebook, Twitter, and Email icons for web end users to share a link to the page across social media
Social media links Social media icons (using the Font Awesome 4.7.0 icon set) can be added to the page and linked to social media accounts
Taxonomy terms display Outputs the taxonomy terms (and, optionally, taxonomy names) associated with the page, for viewing by the web end user

There are 5 widgets which use a set of pre-built styles to provide content with a visual impact:

  • Banner
  • Slideshow (advanced)
  • List listing
  • Grid listing
  • Carousel

Below is a schematic of the relationships between the visual impact widgets and the item styles available for each one.

Mosaic layout widgets and item styles schematic

To add a widget to a page region:

  • In a page's edit mode, navigate to the tab of the page Region you want to add the widget to
  • Click on the widget selector to open the dropdown list
  • Select the widget you want to add
  • Click 'Add another Widget'

Full page editing vs. Quickedit

Widgets can be edited via the full page edit screen (accessed by clicking the 'Edit page' link in a page's editing menu), or by using Quickedit.

Full page editing provides content editors access to all editing options.

Quickedit allows content editors to open the widget editing controls for individual widgets. Pros and cons of Quickediting are:

  • Pros: Quickedit only loads the editing options for one widget at a time, and is sometimes quicker than opening the full page editing screen
  • Cons: widgets cannot be moved to different regions or removed using Quickedit

Configuration options

Each widget is edited using a set of configuration options. There are three configuration options which are found in all widgets:

  • Title
  • Top margin (adds a 16px margin to the top of the widget)
  • Bottom margin (adds a 16px margin to the bottom of the widget) - this is switched on by default

All other configuration options are unique to each widget. See each widget's documentation page for specific information. See also the Mosaic Pattern Book for examples of visual impact widgets and their configuration options.

Collapsed view in the widget editing mode

When more than 3 widgets are present in a page region, their editing options are displayed in 'collapsed' view in the page editing screen.

Click 'Expand' to open the page editing controls.

To move a widget to another page/footer region:

  • Enter the full page editing mode
  • Go to the bottom of the editing options for the widget you want to move
  • Click on the selection box containing the text 'Move to a different region' to expand the list of options
  • Select the region you want to move the widget to
  • Click 'Move widget'
  • A browser alert will warn you that by moving a widget, the page will be saved as a new draft. Click 'OK' on the alert
  • When the page reloads, you will be viewing the new draft

To remove a widget from a page:

  • Click on the 'Remove' button at the bottom of the widget's editing options
  • The widget deletion process will run; once complete, a deletion confirmation message will be displayed
  • When the deletion confirmation message is displayed, click 'Confirm Deletion'
List of site pages