General

•  eZ Systems Website
•  Technical documentation
•  Editor documentation

This Documentation contains:
 
Technical documentation:



⚠ WARNING ! This documentation is deprecated !

Please go to the current Technical Documentation

Skip to end of metadata
Go to start of metadata

This page describes features available only in eZ Studio.

Overview

Landing Page Field Type defines the layout structure of the Landing Page

NameInternal nameExpected input
Landing pageezlandingpagestring (JSON)

 

With the Landing Page Field Type you can define a layout with multiple zones within a single Landing Page.

Within each zone, editors can create blocks, the basic segments of a Landing Page, that contain particular content categories. Specific Content items, called block items, can be added to these blocks.

The configuration of layout and blocks is stored in the default_layouts.yml file. For more information about configuration, refer to the EzLandingPageFieldTypeBundle Configuration chapter.

This organization of the layout structure is particularly useful for managing homepages.

 

In this topic
 

 

Layout

Layout is the way in which a Landing Page is divided into zones.

  • By default, Studio Demo Bundle provides several preset layouts.

    Layout selection window Select a Layout window with different layouts to choose

 

 

A Landing Page can have one of two general layout types:

    • Static page is a type of Landing Page with a very basic content structure. It offers very flexible editing of content and layout at the same time, which is useful for example in simple marketing campaigns.

      The Static Landing Page is beyond the scope of the first stable release (eZ Enterprise 2016.)

    • Dynamic page is a type of Landing Page with an advanced content structure. It introduces the possibility to manipulate the structure of pages. The dynamic structure is based on zones and easily deployable blocks.

 

  • You can use any type of layout from the Studio Demo bundle or you can create a new one from scratch. You can define as many layouts as you need.

 

Zones

As mentioned above, a layout is composed of zones.  Zones are organized structures that are deployed over a layout in a particular position .

The placement of zones is defined in a template which is a part of the layout configuration. You can modify the template, hard-coded in HTML, in order to define your own system of zones.

 

Zone structure

Each zone contains the following parameters:

NameDescription
<zone_id>Required. A unique zone ID
<name>Required. Zone name

 

Defining a zone layout

You can define a new layout file (e.g. in Twig) for a zone and include it in a Landing page layout.

A Zone is a container for blocks. The best way to display blocks in the zone is to iterate over a blocks array and render the blocks in a loop.

 For eZ Studio, the data-studio-zone attribute is required to allow dropping the Content into specific zones.

Example of a zone layout:

zone.html.twig

Blocks

Blocks are the basic segment of a Landing Page and integral parts of a zone. Each zone can contain a number of blocks.

Blocks can be placed on a Landing Page using drag-and-drop and later customized.

 

Creating a new block

Creating a class for the block

The class for the block must implement the BlockType interface:

Most methods are implemented in a universal way by using the AbstractBlockType abstract class:

If your block does not have specific attributes or a structure, you can extend the AbstractBlockType class, which contains simple generic converters designated for the block attributes.

Example:


Describing a class definition

A block must have a definition set using two classes:

The BlockAttributeDefinition class defines the attributes of a block:

AttributeTypeDefinition
$idstringblock attribute ID
$namestringblock attribute name
$typestringblock attribute type, available options are:
  • integer
  • string
  • url
  • text
  • embed
  • select
  • multiple
$regexstringblock attribute regex used for validation
$regexErrorMessagestringmessage displayed when regex does not match
$requiredboolTRUE if attribute is required
$inlineboolindicates whether block attribute input should be rendered inline in a form
$valuesarrayarray of chosen values
$optionsarrayarray of available options


The BlockDefinition class describes a block:

AttributeTypeDefinitionNote

$type

stringblock type 
$namestringblock name 
$categorystringblock category 
$thumbnailstringpath to block thumbnail image 
$templatesarrayarray of available paths of templates

Retrieved from the config file (default_layouts.yml)

$attributesarrayarray of block attributes (objects of  BlockAttributeDefinition  class) 


 

When extending AbstractBlockType you must implement at least 3 methods:

 createBlockDefinition()

This method must return an  EzSystems\LandingPageFieldTypeBundle\FieldType\LandingPage\Definition\BlockDefinition  object.

Example of a Gallery block:

 getTemplateParameters(BlockValue $blockValue)

This method returns an array of parameters to be displayed in rendered view of block. You can access them directly in a block template (e. g. via twig {{ title }} ).

 

When parameters are used in the template you call them directly without the parameters array name:

CorrectNot Correct
<h1>{{ title }}</h1> <h1>{{ parameters.title }}</h1>

 

Example of the getTemplateParameters() method implementation:

 

 checkAttributesStructure(array $attributes)

This method validates the input fields for a block. You can specify your own conditions to throw the InvalidBlockAttributeException exception.

This InvalidBlockAttributeException exception has the following parameters:

NameDescription
blockType name of a block
attribute name of the block's attribute which failed validation
message a short information about an error
previous previous exception, null by default

 

Example:

When the class is created make sure it is added to a container.

 

Adding the class to the container

 The services.yml file must contain info about your block class.

The description of your class must contain a tag which provides:

  • tag name: landing_page_field_type.block_type
  • tag alias: <name of a block>

 

An example:

 

Rendering Landing Page

Landing page rendering takes place while editing or viewing.

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

Each div that's a zone or zone's container should have data attributes:

  • data-studio-zones-container for a div containing zones
  • data-studio-zone with zone ID as a value for a zone container

 

To render a block inside the layout, use twig render_esi() function to call ez_block:renderBlockAction . 

ez_block is an alias to EzSystems\LandingPageFieldTypeBundle\Controller\BlockController

 

An action has the following parameters:

  • contentId - ID of content which can be accessed by contentInfo.id
  • blockId - ID of block which you want to render

 

Example usage:

 

As a whole a sample layout could look as follows:

landing_page_simple_layout.html.twig

 

 

Viewing template

Your view is populated with data (parameters) retrieved from the getTemplateParameters() method which must be implemented in your block's class.

Example:

Implementation Example

Block Class

TagBlock.php

service.yml configuration

services.yml

Block template

tag.html.twig