Warning: You are browsing the documentation from version 4 to 10 of Pimcore. Please visit https://pimcore.com/docs/platform/ for the latest versions of Pimcore.
Version:

Adding a custom layout

For adding new a layout type, follow these steps:

  1. Create a template view file: templates/headless/custom.html.twig
{# array states #}
<h5>** Custom Layout **</h5>
<div>
    {% for state in states %}
        {% for editable in state.items %}
            {% if editable is pimcore_headless_editable %}
                {{ editable.getContent()|raw }}
            {% endif %}
        {% endfor %}
    {% endfor %}
</div>
  1. Add a layout class, which implements \Pimcore\Bundle\HeadlessDocumentsBundle\Headless\Layout\LayoutInterface and define layout path in the class:

src/Headless/CustomLayout.php

class CustomLayout implements \Pimcore\Bundle\HeadlessDocumentsBundle\Headless\Layout\LayoutInterface
{
    public function getName(): string
    {
        return 'custom';
    }

    public function getLayoutPath(): string
    {
        return 'headless/custom.html.twig';
    }
}
  1. Register Layout as a tagged service ``: config/services.yaml
    App\Headless\CustomLayout:
        tags:
            - { name: pimcore.headless.documents.layout }
  1. Use custom layout in template configuration:
layout: custom
content:
    headline:
        type: input
        config:
            placeholder: Headline
            required: true
    mainContent:
        type: wysiwyg