Skip to content
  • Documentation >
  • Content management >
  • Field Types >
  • Field Type reference >
  • Page Field Type

Page Field Type

Page Field Type represents a Page with a layout consisting of multiple zones. Each zone can in turn contain blocks.

Page Field Type is only used in the Page content type that is included in Ibexa Experience.

Name Internal name Expected input
Landing page ezlandingpage string (JSON)

Page Builder

If you create content type with both ezlandingpage and ezuser Field Types, you will not be redirected to Page Builder after selecting Edit or Create. This is caused by ezuser Field Type which requires separate handling. You will be redirected to the standard Back Office edit or create mode.

Layout and zones

Layout defines how a Page is divided into zones.

The placement of zones is defined in a template which is a part of the layout configuration. You can modify the template in order to define your own zone layout.

For information on how to create and configure new blocks for the Page, see Page layouts.

Blocks

For information on how to create and configure new blocks for the Page, see Create custom Page block.

Rendering Pages

Page rendering takes place while editing or viewing.

When rendering a Page, its zones are passed to the layout as a zones array with a blocks array each. You can access them using twig (e.g. {{ zones[0].id }} ).

Each div that's a zone should have the data-ibexa-zone-id attribute with zone ID as a value for a zone container.

To render a block inside the layout, use the Twig render_esi() function to call Ibexa\\Bundle\\FieldTypePage\\Controller\\BlockController::renderAction.

The renderAction has the following parameters:

Parameter Description
locationId ID of the Location of the content item which can be accessed by contentInfo.id
blockId ID of the block which you want to render.
versionNo Version number of the content item to render.
languageCode Language code of the content item to render.

Example usage:

1
2
3
4
5
6
{{ render_esi(controller('Ibexa\\Bundle\\FieldTypePage\\Controller\\BlockController::renderAction', {
    'locationId': locationId,
    'blockId': block.id,
    'versionNo': versionInfo.versionNo,
    'languageCode': field.languageCode
})) }}

As a whole a sample layout could look as follows:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
<div>

    <div data-ibexa-zone-id="{{ zones[0].id }}">

        {% if zones[0].blocks %}

            {% for block in blocks %}

                <div class="landing-page__block block_{{ block.type }}" data-ez-block-id="{{ block.id }}">


                    {{ render_esi(controller('Ibexa\\Bundle\\FieldTypePage\\Controller\\BlockController::renderAction', {
                        'locationId': locationId,
                        'blockId': block.id,
                        'versionNo': versionInfo.versionNo,
                        'languageCode': field.languageCode
                    })) }}
                </div>
            {% endfor %}
        {% endif %}
    </div>
</div>