Skip to content
  • Documentation >
  • Guide >
  • Content rendering >
  • 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 ezplatform_page_fieldtype.layouts key.

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

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
ezplatform_page_fieldtype:
    layouts:
        sidebar:
            identifier: sidebar
            name: Right sidebar
            description: Main section with sidebar on the right
            thumbnail: /assets/images/layouts/sidebar.png
            template: '@ezdesign/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-ez-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:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<div>
    <div data-ez-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('EzSystems\\EzPlatformPageFieldTypeBundle\\Controller\\BlockController::renderAction', {
                        'contentId': contentInfo.id,
                        'blockId': block.id,
                        'versionNo': versionInfo.versionNo,
                        'languageCode': field.languageCode
                    }))
                    }}
                </div>
            {% endfor %}
        {% endif %}
    </div>
    <div data-ez-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('EzSystems\\EzPlatformPageFieldTypeBundle\\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.

Block configuration

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

1
2
3
4
5
6
7
ezplatform_page_fieldtype:
    blocks:
        contentlist:
            views:
                custom:
                    template: '@ezdesign/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:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
<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('ez_urlalias', {'locationId': content.location.id}) }}">{{ ez_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/EzPlatformPageFieldTypeBundle/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/EzPlatformPageFieldTypeBundle/blocks/contentlist.html.twig:

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

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