Plone Mosaic main repository
JavaScript Python CSS HTML Nix Shell Other
Latest commit 9c11e5c Feb 22, 2017 @datakurre datakurre committed on GitHub Merge pull request #347 from plone/datakurre-layout-permission
Add support for 'permission' in content layout manifest
Permalink
Failed to load latest commit information.
bin Update Heroku configuration Sep 15, 2016
docs docs: more love for the getting started screenshots Nov 26, 2016
resources/src/plone-mosaic Provide outline mode by holding alt down #247 Sep 9, 2016
src/plone Add support for 'permission' in content layout manifest and filter av… Feb 22, 2017
tests Removing coverage reports Jun 11, 2014
.bowerrc update build Jul 8, 2015
.coveragerc Add coverage config Aug 19, 2016
.gitattributes Allowed union merge strategy in CHANGES.rst. Oct 24, 2015
.gitignore Add Webpack based development option Sep 6, 2016
.isort.cfg add isort configuration Feb 23, 2016
.jscs.json Js Pattern for mosaic layout Jun 11, 2014
.jshintrc Js Pattern for mosaic layout Jun 11, 2014
.travis.yml Fix #319 Nov 27, 2016
CHANGES.rst Add support for 'permission' in content layout manifest and filter av… Feb 22, 2017
Gemfile Be able to save layouts user is working on Apr 7, 2016
LICENSE Initial commit Jun 2, 2014
MANIFEST.in Update manifest Sep 15, 2016
Makefile Add plone.jsonserializer into checkouts Sep 8, 2016
Procfile Try to upgrade Heroku buildpack for Plone 5 Apr 16, 2015
README.rst Disable TOC tile and rawembed tiles by default Dec 13, 2016
app.json Try to upgrade Heroku buildpack for Plone 5 Apr 16, 2015
base.cfg Update buildout configs Aug 19, 2016
bootstrap.py Add working robot testing setup Jun 13, 2014
bootstrap.sh use requirements file Mar 4, 2016
bower.json Remove pluggable grid system Sep 7, 2016
build.js Be able to save layouts user is working on Apr 7, 2016
buildout.cfg filename fix Apr 28, 2016
default.nix Fix NixOS dev setup Sep 6, 2016
develop.cfg Add plone.jsonserializer into checkouts Sep 8, 2016
docutils.conf Abstract robot selectors for Plone 5 May 5, 2015
heroku.cfg Pin plone.app.mosaic = 2.0.0rc4 for heroku Dec 13, 2016
package.json Add Webpack based development option Sep 6, 2016
requirements.txt use requirements file Mar 4, 2016
setup.py Back to development: 2.0.0rc5 Dec 13, 2016
sources.cfg Update branches Sep 8, 2016
test-5.0.x.cfg Update buildout configs Aug 19, 2016
test-5.coredev.cfg Update buildout configs Aug 19, 2016
webpack.config.js Add Webpack based development option Sep 6, 2016

README.rst

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 plone.app.widgets. Read this introduction and the package documentation for more details how to use this package.

Travis CI badge Coveralls badge https://www.herokucdn.com/deploy/button.png

Concepts

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.

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 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:

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 plone.app.standardtiles.fields 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.

Installation

Plone Mosaic is installed by building a Plone site with package plone.app.mosaic and activating its Plone Mosaic add-on. The A example set of dependencies' version pins for Plone 5 that works with the latest plone.app.mosaic is:

plone.tiles = 1.8.1
plone.subrequest = 1.8
plone.app.tiles = 3.0.1
plone.app.standardtiles = 2.0.0
plone.app.blocks = 4.0.0
plone.app.drafts = 1.1.1
plone.app.mosaic = 2.0.0rc4

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.

Status

Plone Mosaic is considered to be in beta phase. Most features for the first final release are done, but there may still be 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 https://github.com/plone/plone.app.mosaic
$ cd plone.app.mosaic
$ python bootstrap.py  # clean python 2.7 virtualenv recommended
$ bin/buildout

Startup:

$ 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 Mosaic 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 must be manually updated for Plone 4.3.x with:

$ make 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

Webpack based frontent development

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.

Documentation screenshots

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

$ git clone https://github.com/plone/plone.app.mosaic
$ cd plone.app.mosaic
$ python bootstrap.py  # 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 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

and open ./report.html to view the test report.

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