• Documentation >
• Templating >
• Render content >
• Render Page

Render a Page

Page is a special content type that contains a Page Field.

A Page Field is a layout composed of zones. Each zone can contain multiple blocks.

Render a layout

Configure layout

The default, built-in Page layout has only one zone. You can create other layouts in configuration, under the ibexa_fieldtype_page.layouts key.

To create a new layout called "Right sidebar", use the following configuration:

ibexa_fieldtype_page:
    layouts:
        sidebar:
            identifier: sidebar
            name: Right sidebar
            description: Main section with sidebar on the right
            thumbnail: /assets/images/layouts/sidebar.png
            template: '@ibexadesign/layouts/sidebar.html.twig'
            zones:
                first:
                    name: First zone
                second:
                    name: Second zone

Add layout template

A layout template renders all the zones of the layout.

Each zone must have a data-ibexa-zone-id attribute with the number of the zone.

The best way to display blocks in the zone is to iterate over a blocks array and render the blocks in a loop. Each block must have the landing-page__block block_{{ block.type }} classes and the data-ez-block-id="{{ block.id }} attribute.

To render the "Right sidebar" layout, add the following template to templates/themes/my_theme/layouts/sidebar.html.twig:

<div>
    <div data-ibexa-zone-id="{{ zones[0].id }}">
        {% if zones[0].blocks %}
            {% for block in zones[0].blocks %}
                <div class="landing-page__block block_{{ block.type }}" data-ez-block-id="{{ block.id }}">
                    {{ render_esi(controller('Ibexa\\Bundle\\FieldTypePage\\Controller\\BlockController::renderAction', {
                        'contentId': contentInfo.id,
                        'blockId': block.id,
                        'versionNo': versionInfo.versionNo,
                        'languageCode': field.languageCode
                    }))
                    }}
                </div>
            {% endfor %}
        {% endif %}
    </div>
    <div data-ibexa-zone-id="{{ zones[1].id }}">
        {% if zones[1].blocks %}
            {% for block in zones[1].blocks %}
                <div class="landing-page__block block_{{ block.type }}" data-ez-block-id="{{ block.id }}">
                    {{ render_esi(controller('Ibexa\\Bundle\\FieldTypePage\\Controller\\BlockController::renderAction', {
                        'contentId': contentInfo.id,
                        'blockId': block.id,
                        'versionNo': versionInfo.versionNo,
                        'languageCode': field.languageCode
                    }))
                    }}
                </div>
            {% endfor %}
        {% endif %}
    </div>
</div>

Render a block

Every built-in Page block has a default template, which you can override. Every Page block can also have multiple other templates. The editor chooses a template when creating a block in the Page Builder.

Clear the persistence cache

Persistence cache must be cleared after any modifications have been made to the block config in Page Builder, such as adding, removing or altering the Page blocks, block attributes, validators or views configuration.

To clear the persistence cache run ./bin/console cache:pool:clear [cache-pool] command. The default cache-pool is named cache.tagaware.filesystem. The default cache-pool when running redis is named cache.redis. If you have customized the persistence cache configuration, the name of your cache pool might be different.

In prod mode, you also need to clear the symfony cache by running ./bin/console c:c. In dev mode, the Symfony cache will be rebuilt automatically.

Block configuration

You can add new block templates by using configuration, for example, for the Content List block:

ibexa_fieldtype_page:
    blocks:
        contentlist:
            views:
                custom:
                    template: '@ibexadesign/blocks/contentlist.html.twig'
                    name: Custom content list

Tip

Use the same configuration to provide a template for custom blocks you create.

Block template

Create the block template file in the provided path, for example, templates/themes/my_theme/blocks/contentlist.html.twig:

<div class="block-contentlist {{ block_class }}">
    <h3>{{ parentName }}</h3>
    {% if contentArray|length > 0 %}
        <div class="block-contentlist-items">
            {% for content in contentArray %}
                <div class="block-contentlist-child">
                    <h4><a href="{{ path('ibexa.url.alias', {'locationId': content.location.id}) }}">{{ ibexa_content_name(content.content) }}</a></h4>
                </div>
            {% endfor %}
        </div>
    {% endif %}
</div>

Override default block templates

To override the default block template, create a new template. Place it in a path that mirrors the original default template from the bundle folder. For example: templates/bundles/IbexaFieldTypePageBundle/blocks/contentlist.html.twig.

Tip

To use a different file structure when overriding default templates, add an import statement to the template.

For example, in templates/bundles/IbexaFieldTypePageBundle/blocks/contentlist.html.twig:

{% import 'templates/blocks/contentlist/new_default.html.twig'}

Then, place the actual template in the imported file templates/blocks/contentlist/new_default.html.twig.