Principle

The basic component of a Mosaic-based layout is called a tile. A layout is a combination of several tiles. 

A tile is a dynamic portion of a web page and can be a text element, image, field, etc.

Using Mosaic, an editor can position tiles across the Mosaic grid.

Modifying Existing Tiles

Each template comes with default tiles placed in the layout. For example, in the Document layout, the Title, Summary, and Text field tiles are already placed on the page.

Title Field

Mosaic Tiles - Title Field 

Summary Field

The Summary field is a plain text field (without any form of rich text mark-up) similar to the Summary field on a standard Plone Page.  The Summary also appears in search results via Plone’s search engine.

 Mosaic Tiles - Summary Field

Text Field

The Text field is a Rich Text field similar to the Text field on a standard Plone Page. When you click on this field, a TinyMCE toolbar will appear.

Mosaic tile: Text field with TinyMCE editing bar highlighted

When you are done making changes, click Save.

 Mosaic menu bar: Save button highlighted

The resulting page.

 Resulting saved page

Inserting a Tile

Let’s insert a Rich Text tile.

 

Removing a Tile

Tiles can only be removed when Mosaic is in Customize mode.  If you do not see the Format and Insert buttons in the editing toolbar, click Layout and select Customize.

 Rich text tile with Delete button highlighted

 

Exercise: Modify the Layout of a Page

Create a new Page and add a new tile.

Solution

  1. Set Display to Mosaic layout.
  2. Click Edit and then select the Document layout.
  3. Select Layout, then choose Customize.
  4. Click Insert button, then choose Document Byline.
  5. Add a Document Byline to the bottom of the layout.
  6. Click Save.