Layouts

A layout defines how the editables of a template configuration are arranged. Set it with the layout key at the top of a template; if omitted, the simple layout is used.

The bundle ships three layout types, based on the Bootstrap 4 framework. Add a custom layout if none of them fits.

Grid and Tab-Panel layouts use a special panel type to group editables into containers (columns, tabs). Unlike content entries such as input or wysiwyg, panel does not hold a value itself, it only groups the items nested inside it.

Simple Layout

Renders every editable in a single column, in the order they appear in content. This is the default.

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

Grid Layout

Arranges panel containers in a Bootstrap grid, using the class config key for grid classes such as row or col.

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 2'
                                class: 'col'
                            items:
                                text1:
                                    type: wysiwyg

Tab-Panel Layout

Renders each top-level panel as a tab. Set active: true on the panel that should be selected initially.

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' ]

Layout Manager

The Layout Manager registers layouts, which are tagged services (pimcore.headless.documents.layout), and renders the layout that a template configuration selects.

Rendering is based on two state types, passed to the layout's Twig template as the states variable:

• LayoutState: a panel container that holds other states.
• EditableState: a building block that holds the rendered output of one editable.

See Adding a Custom Layout to register a new layout type.