Skip to main content

Plone Mosaic

Project description

Plone Mosaic

Plone Mosaic is a new layout solution for Plone. It’s built for Plone 5, but should also work on Plone 4.3 with Read this introduction and the package documentation for more details how to use this package.


Mosaic, Blocks and Tiles provide a simple, yet powerful way to manage the pages on your Plone website. At their core, they rely on semantic HTML and resources with valid, publishable URLs.

Mosaic Editor editor is a visual editor for pages rendered using Blocks. It relies on a grid system to place tiles onto a page in an intuitive, WYSIWYG, drag-and-drop manner. Using Mosaic Editor, it is easy to compose pages with complex, balanced and visually appealing layouts. - custom layout behavior for Dexterity content types

Currently, the Mosaic Editor is activated, when any content with Custom layout view active is being edited. (Custom layout is available for any content with Layout support behavior enabled.)

Blocks is a rendering algorithm based on HTML markup conventions. A page managed by Mosaic Editor is stored as a simple HTML document representing the actual content of that page as a standalone, publishable resource devoid of any site layout content (e.g. global navigation elements). This is referred to as content layout.

Tiles represent the dynamic portions of a page. At its most basic level, a tile is simply an HTML document with a publishable URL.

In practice, tiles are usually implemented as browser views deriving from the Tile base class and registered with the <plone:tile /> ZCML directive. This allows tiles to have some basic metadata and automatically generated edit forms for any configurable aspects , which Deco will expose to users. See plone.tiles for examples.

When work with tiles in Mosaic Editor, there are three types of tiles:

Text tiles

Static HTML markup (WYSIWYG-edited text) placed into the content or site layout. Strictly speaking, text tiles are not tiles in that they do not involve any tile fetching or merging - instead they are stored as part of the page or site layout. To the user, however, a text tile can be moved around and managed like any other.

Field tiles

Render the value of a metadata field such as the title or description. The values of field tiles may be edited in-place in the page, but the value is stored in the underlying field and can be indexed in the catalog, used for navigation and so on. In practice, a field tile is an instance of the special tile with the field name passed as a parameter.

App tiles

Any other type of dynamic tile. Examples may include a folder listing, a media player, a poll or pretty much anything else you can think of.


Plone Mosaic is installed by building a Plone site with package and activating its Plone Mosaic add-on. The package has following dependencies:

plone.tiles >= 1.4.0 >= 2.1.0 >= 1.0b1 >= 2.1.2 >= 1.0b3 >= 1.8.0

After the add-on activation, the new content layout and editor support can be enabled for any content type by enabling behaviors Layout support and Drafting support.


Plone Mosaic is considered to be in alpha phase. There are bugs, which should be reported. Not all the features of Plone Mosaic have yet easily accessible UI (e.g. layouts can be created into portal_resources and bound to content types as named views only through Zope Management Interface, ZMI).

Backend development

Plone 5 version of Plone Mosaic is available for development using plips/plip-mosaic.cfg at Plone 5 coredev-buildout.

Plone 4 version of Plone Mosaic can be developed by cloning the product directly.

Clone and build:

$ git clone
$ cd
$ python  # clean python 2.7 virtualenv recommended
$ bin/buildout


$ bin/demo

Get started:

  • open a browser at http://localhost:55001/plone/++add++Document

  • login as admin with password secret

  • save the new page

  • from the Display-menu, select the new entry Custom layout

  • click Edit to see the new Mosaic Editor

Alternatively you can also use bin/instance fg.

Frontend development

Plone Mosaic requires javascript and css bundles, which are automatically build for Plone 5.x, but which must be manually build for Plone 4.3.x as follows:

$ npm install
$ make clean all mode=release

The bundle can also be built with source maps and watched for changes with:

$ npm install
$ make clean all watch

Documentation screenshots

To script screenshots into the Sphinx documentation, use the development buildout:

$ git clone
$ cd
$ python  # clean python 2.7 virtualenv recommended
$ bin/buildout -c develop.cfg

To speed up your iterations, before compiling the docs, start the robot server with:

$ bin/robot-server -v

With robot-server running, you can re-build the docs’ screenshots relatively fast with:

$ bin/robot-sphinx docs html

Just add Debug keyword anywhere to pause the robot in the middle of the screenshot script and drop you into a Robot Framework REPL.


1.0a3 (2015-06-10)

  • Add “Bootstrap 3 Demo” example site layouts for Plone 5 [datakurre]

  • Add support for’ generic data grid transform [datakurre]

  • Change the default site layouts in Plone 5 to use 12 column deco grids [datakurre]

  • Fix various site layout support related issues [datakurre]

  • Upgrade to >= 1.0b3 and >= 2.1.2 [datakurre]

1.0a2 (2015-06-08)

  • Add ‘Center tile content’ tile style to allow e.g. centering of image tiles [datakurre]

  • Add site and page layout fields to be available on properties overlay [datakurre]

  • Add HTML tag language transform to set correct langauge for HTML site layouts [datakurHTML re]

  • Add HTML body tag class transform to set body class for HTML site layouts [datakurre]

  • Add HTTP headers transform to ensure that the response headers normally set by plone.httpheaders viewlet manager are also set for HTML site layouts [datakurre]

  • Update example site and content layouts [datakurre]

  • Fix to only cache site layout when it’s not the default main_template [datakurre]

  • Upgrade to >= 1.0b2 and >= 1.0b1 [datakurre]

1.0a1 (2015-05-27)

  • First technology preview release.

Project details

Download files

Download the file for your platform. If you're not sure which to choose, learn more about installing packages.

Source Distribution (222.5 kB view hashes)

Uploaded Source

Supported by

AWS AWS Cloud computing and Security Sponsor Datadog Datadog Monitoring Fastly Fastly CDN Google Google Download Analytics Microsoft Microsoft PSF Sponsor Pingdom Pingdom Monitoring Sentry Sentry Error logging StatusPage StatusPage Status page