Layout configuration reference#

This section provides technical details for configuring content and site layouts in Plone Mosaic.

Manifest settings (manifest.cfg)#

When registering layouts in a package, the manifest.cfg file supports the following settings within a [contentlayout] or [sitelayout] section:

title : The display name of the layout in the selection menu.

description : (Optional) A short description of the layout’s purpose.

file : The path to the HTML file containing the layout structure, relative to the manifest file.

preview : (Optional) The path to a PNG image used as a thumbnail in the layout selector.

for : (Optional) A comma-separated list of portal types for which this layout should be available.

Tile configuration classes#

You can control the behavior of individual tiles within a layout by adding specific CSS classes to the tile’s wrapper element (the element containing the mosaic-tile class).

movable : Allows the tile to be dragged and dropped into different positions within the Mosaic editor.

removable : Allows the user to delete the tile from the page.

mosaic-read-only-tile : Prevents the user from editing the tile’s content or changing its settings.

Example:

<div class="movable removable mosaic-tile">
  <!-- tile content -->
</div>

Grid and column configuration#

Mosaic uses a row-and-column grid system. You can configure the maximum number of columns available in a specific panel using the data-max-columns attribute.

data-max-columns : Specifies the grid width (typically 4 or 12). This attribute must be placed on the element defining the content panel.

<div data-panel="content" data-max-columns="12">
  <!-- row/column structure goes here -->
</div>