Skip to content
  • Documentation >
  • Guide >
  • Content rendering >
  • Page rendering

Page rendering

Enterprise

Page layouts

A Page has a customizable layout with multiple zones where you can place blocks with content.

A clean installation has only one default layout. You can preview more layouts in the Demo bundle.

A Page layout is composed of zones.

Zone structure

Each zone contains the following (required) parameters:

Name Description
zone_id A unique zone ID
name Zone name

Layout configuration

The layout is configured in YAML files:

 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: AppBundle:layouts:sidebar.html.twig
            zones:
                first:
                    name: First zone
                second:
                    name: Second zone

The following parameters need to be included in the settings of the configuration:

Parameter Type Description Required
layouts string Layout config root Yes
number string Unique key of the layout Yes
string ID of the layout Yes
string Name of the layout Yes
string Description of the layout Yes
string to thumbnail image Yes
string to template View, for example: AppBundle:layouts:sidebar.html.twig
<bundle>:<directory>:<file name>		 Yes
string Collection of zones Yes
string ID of the zone Yes
string Zone name Yes

Layout template

A layout template will include all zones the layout contains.

A zone is a container for blocks. Each zone must have a data-ez-zone-id attribute.

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 (see line 9).

 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
33
34
35
36
37
38
<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('EzPlatformPageFieldTypeBundle:Block:render', {
                            '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('EzPlatformPageFieldTypeBundle:Block:render', {
                            'contentId': contentInfo.id,
                            'blockId': block.id,
                            'versionNo': versionInfo.versionNo,
                            'languageCode': field.languageCode
                        }))
                    }}
                </div>
            {% endfor %}
        {% endif %}
    </div>
</div>

Block templates

Every built-in Page block has a default template. You can add new templates to blocks or override the default ones.

Adding new block templates

You can add new block templates with the YAML config, for example for the Gallery block:

1
2
3
4
5
6
blocks:
    gallery:
        views:
            special:
                template: blocks/gallery/special.html.twig
                name: Special view

Overriding 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: /app/Resources/EzPlatformPageFieldTypeBundle/views/blocks/gallery.html.twig.

Tip

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

For example, in /app/Resources/EzPlatformPageFieldTypeBundle/views/blocks/gallery.html.twig:

1
{% import 'app/Resources/views/blocks/gallery/new_default.html.twig'}

Then, place the actual template in the imported file app/Resources/views/blocks/gallery/new_default.html.twig.