Rikupekka Oksanen

Creating flexible and responsive tile-based pages using Plone Mosaic

July 27th, 2016

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.

Normally a Plone page consists of a title, description and content section. Using Mosaic one can easily create custom layouts and use them as templates for othes pages.

Mosaic editor example

 

1. How to Create a Mosaic Page

All too easy:

  1. Add a new page
  2. Select Display -> Mosaic layout
  3. Select Basic or Document layout
  4. Save


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

You can still edit normal page properties on the top left corner, but for editing Mosaic layout, there are two menus on the top right corner: Format and Insert.

At first I'll insert a couple of tiles into place. Starting with text tiles is the way to go.

Insert menu


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 Page

I 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
  • Images
  • Links

Occasionally I have missed the opportunity to edit HTML, though.


However, the basic formatting functions on tiles go a long way:

Formatting options


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 :)
  • Accordions
  • Tabs
  • Dropdown menu
  • Custom CSS!

All can be manipulated in the browser.

An example here:

 



And another one:

 

Issues and suggestions

In 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

Overall technically Mosaic is very robust - I haven't come across any errors or technical issues while using it.

However, Mosaic still has some missing features in order to replace Portalview as it is, but luckily:

Plone Mephisto Sprint 2016, Leipzig, Germany, September 5th-9th 2016

Due to power of the awesome Plone open source community, there will be a sprint to develop Plone Mosaic further!