Skip to main content
Version: 2023.3

Layouts

A Layout is a vital part of headless template configuration, which defines the structure for Pimcore editables.

The bundle ships with following standard layout types, which are based on Bootstrap 4 framework. You can also add a custom layout based on bootstrap 4.

Simple Layout

pimcore_headless_documents:
templates:
example:
layout: simple
content:
headline:
type: input
config:
placeholder: 'Headline'
required: true
mainContent:
type: wysiwyg

Grid Layout

pimcore_headless_documents:
templates:
example_grid:
layout: grid
content:
row:
type: panel
config:
class: 'row p-3'
items:
col1:
type: panel
config:
title: 'column 1'
class: 'col'
items:
headline1:
type: input
config:
placeholder: 'Headline'
required: true
col2:
type: panel
config:
title: 'column 3'
class: 'col'
items:
text1:
type: wysiwyg

Tab-Panel Layout

pimcore_headless_documents:
templates:
example_tab:
layout: tabpanel
content:
tab1:
type: panel
config:
title: 'Tab 1'
active: true
items:
headline:
type: input
label: Headline
config:
placeholder: 'Headline'
required: true

selectTest:
type: select
config:
store:
- [ "one-month", "One month" ]
- [ "three-months", "three-months" ]
- [ "unlimited", "unlimited" ]
images:
type: block
config:
limit: 2
items:
image:
type: image
config:
height: 200
width: 300
tab2:
type: panel
config:
title: 'Tab 2'
items:
wysiwyg:
type: wysiwyg
config:
height: 200

contentBlocks:
type: areablock
config:
allowed: [ 'teasers', 'gallery', 'video', 'productListing', 'image', 'relations' ]

By default, the simple layout is used, if no layout is defined in the template configuration.

Layout Manager

The Layout Manager is responsible for registering layouts, which are defined as tagged services pimcore.headless.documents.layout in compiler pass. It also validates and renders the current layout on the headless document, defined in template configuration.

The Layout Manager is based on concept of states for template rendering. These states are:

  • LayoutState: A LayoutState is a panel container, which holds the pimcore editables.
  • EditableState: An EditableState is a building block, which holds the rendered editable code block.

These states are passed onto to the layout template file as a parameter, which handles the actual rendering of these states.

Read more about Adding a Custom Layout