Skip to main content
Version: 2023.2

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