What is Plone Mosaic?
Plone Mosaic is a new layout solution for Plone CMS. Mosaic, Blocks and Tiles provide a simple, yet powerful way to manage the pages on your Plone website.In this article I will give examples on how to create and edit flexible and responsive tile-based pages using Plone Mosaic. I'll also discuss some issues I have so far bumped into, and ponder on the possibility to use Mosaic to replace Portalview, our current tool to compose customized portals. I'll use Plone 5, the newest version of Plone CMS.
|Mosaic editor example|
1. How to Create a Mosaic PageAll too easy:
- Add a new page
- Select Display -> Mosaic layout
- Select Basic or Document layout
Basically you first have to create a page and then change how the page is viewed - using normal Plone page layout or Mosaic layout.
2. How to Edit a Mosaic Page
|Mosaic editor on Plone 5|
At first I'll insert a couple of tiles into place. Starting with text tiles is the way to go.
It is easy to drag and drop the tile into a desired place. There can be 1-4 colums side by side. And they are responsive too.
In this example I added two text tiles and an image.
|Drag and drop the new tile to a desired place.|
|Image dropped over a text tile|
Embedding media works well too using the Embed tile (and Oembed). Just add a media URL.
One thing missing here, though, is the opportunity to change embed size. Quite often the video size is not optimal.
3. Formatting a Mosaic PageI can quickly drag and drop new tiles to the page, rearrange or delete tiles.
If I want to edit a text tile, I'll just click it and a TinyMCE editor appears:
|TinyMCE on Mosaic text tile|
The editor has basic editing features, such as:
- Formatting (headers, paragraphs etc.)
- Text alignment
- Bullet lists
However, the basic formatting functions on tiles go a long way:
I can change content alignment, add a dark background and add some padding between tiles. Of course this could be done using Plone theming tools too.
Changing the structure of a mosaic page is really easy and it works well - I haven't come across any issues on drag and drop (Using Firefox on OSX).
Replacing Portalview with Mosaic?One use case for Mosaic when we migrate our websites to Plone 5 could be replacing our multiple portal pages. They are created using our own Portalview composition add on (sorry, only a really old version available!). Portalview contains e.g. the following features:
- Possibility to compose a customised layout (based on folders and other Plone content)
- Image/text/video/page carousel (Yes I know, carousels are evil :)
- Dropdown menu
- Custom CSS!
An example here:
And another one:
Issues and suggestionsIn addition to myself there are couple of users and content managers working with Mosaic. First comments have been positive: "This looks shiny and modern!" More experience we will get next autumn when users begin to create new site for a new faculty at University of Jyväskylä.
"This looks shiny and modern!"
Some issues or suggestions for features so far:
- Selecting between basic and document layout is probably not needed activating Mosaic layout?
- In addition to text tile there are list elements and subheadings - they can be added through text tiles - perhaps not needed as tiles at all?
- No unique ID:s on different tiles - makes it harder to create customised CSS for certain tiles
- TinyMCE doesn't show html view. Could come handy at some cases (embedding an iframe for example)
- Not possible to change embed size.
- No custom CSS
However, Mosaic still has some missing features in order to replace Portalview as it is, but luckily: