Plone Mosaic is a site builder and layout solution for Plone.
Read this introduction and the package documentation for more details how to use this package.
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.
Currently, the Mosaic Editor is activated, when any content with Mosaic layout view active is being edited. (Mosaic 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. It is 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 Mosaic will expose to users.
See plone.tiles for examples.
When work with tiles in Mosaic Editor, there are three types of tiles:
plone.app.standardtiles.fieldswith the field name passed as a parameter.
Plone Mosaic is installed by building a Plone site with package plone.app.mosaic and activating its Plone Mosaic add-on.
The dependencies are already version pinned in Plones ecosystem.
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.
Note for Plone 5.1:
2.2.x the renamed IRichTextBehavior behavior is used from
plone.app.contenttypes >= 2.0.0 to keep the Plone 5.1 compatibility pin plone.app.contenttypes to
However, if a newer version of mosaic is needed, the good known set for the version can be found at Github, Mosaic Code repository, in the file versions.cfg
buildout.cfg for Plone
5.1.x with plone.app.mosaic
2.2.x could look like this:
[buildout] extends = https://dist.plone.org/release/5.1-latest/versions.cfg https://raw.githubusercontent.com/plone/plone.app.mosaic/master/versions.cfg parts = instance ... [instance] recipe = plone.recipe.zope2instance eggs = Plone plone.app.mosaic ...
Clone and build:
$ git clone https://github.com/plone/plone.app.mosaic $ cd plone.app.mosaic $ python3.7 -m venv . $ ./bin/pip install -r requirements.txt $ ./bin/buildout
For Python 2.7 do exactly the same but create a virtualenv with:
$ virtualenv .
$ python3.7 -m venv .
$ ./bin/instance fg
- open a browser at
- create a Plone Site (user admin, pass admin)
- on the
Welcome to Ploneselect the new entry Mosaic layout from the Display-menu
- click Edit to see the new Mosaic Editor
Development for plone.app.mosaic has moved to Plone 5 and Python 3. To use plone.app.mosaic in Plone4 please use the related release on https://pypi.org
Build the bundle with:
$ npm install $ bower install $ make clean all watch
Plone Mosaic can be developed with Webpack running:
$ make watch_theme
or starting the instances either manually or with
make watch_instance and starting the Webpack development server with:
$ make watch_webpack
Once you have activated theme called Plone Mosaic, the editor will be reloaded and rebuilt by Webpack development server after each filesystem change.
To script screenshots into the Sphinx documentation, use the development buildout:
$ git clone https://github.com/plone/plone.app.mosaic $ cd plone.app.mosaic $ make bin/buildout $ make bin/instance
To speed up your iterations, before compiling the docs, start the robot server with:
$ bin/robot-server plone.app.mosaic.testing.PLONE_APP_MOSAIC_ROBOT -v
With robot-server running, you can re-build the docs' screenshots relatively fast with:
$ bin/robot-sphinx docs html
Or simply run the embedded screenshots as robot tests from a single document with:
$ bin/robot docs/getting-started.rst
or with phantomjs:
$ bin/robot -v BROWSER:phantomjs docs/getting-started.rst
./report.html to view the test report.
Debug keyword anywhere to pause the robot in the middle of the screenshot script and drop you into a Robot Framework REPL.