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