Skip to main content
Version: 2024.3

Areablock Editable

General

The areablock is the content construction kit for documents offered by Pimcore.

Admin panel preview 1Admin panel preview 1Admin panel preview 1

Admin panel preview 2Admin panel preview 2Admin panel preview 2

Integrate an Areablock in a Template

Similar to the other document editables, an areablock can be integrated in any document view template as follows:

{{ pimcore_areablock("myAreablock") }}

Advanced usage with allowed areas, below:

{{ pimcore_areablock("myAreablock", {
"allowed": ["iframe","googletagcloud","spacer","rssreader"],
"group": {
"First Group": ["iframe", "spacer"],
"Second Group": ["rssreader"]
},
"globalParams": {
"myGlobalParam": "Global param value"
},
"params": {
"iframe": {
"parameter1": "value1",
"parameter2": "value2"
},
"googletagcloud": {
"param1": "value1"
}
}
})
}}
Accessing Parameters from the Brick File

Use the value of parameter named "param1" for this brick:

{{ param1 }}
Sorting Items in the menu
{{ pimcore_areablock("content", {
"allowed": ["image","video","wysiwyg"],
"sorting": ["wysiwyg","video","image"],
}) }}

And you can see the effect, below:

Admin panel preview - sroting areablocksAdmin panel preview - sroting areablocksAdmin panel preview - sroting areablocks

Configuration

NameTypeDescription
allowedarrayAn array of area-ID's which are allowed for this tag. The order of items in the array is also used as the default sorting, but of course you can combine this configuration with sorting
sortingarrayAn array of area-ID's in the order you want to display them in the menu.
paramsarrayOptional parameter, this can also contain additional brick-specific configurations, see brick-specific configuration
globalParamsarraySame as params but passed to all bricks independent from the type
grouparrayArray with group configuration (see example above).
manualboolForces the manual mode, which enables a complete free implementation for areablocks, for example using real <table> elements... example see below
reloadboolSet to true, to force a reload in editmode after reordering items (default: false)
limitintLimit the amount of elements
limitsarrayAn array of area-ID's with count to limit the amount of certain elements e.g. {"iframe": 1, "teasers": 2}
areablock_toolbararrayArray with option that allows you to configure the toolbar. Possible options are width, buttonWidth and buttonMaxCharacters
controlsAlignstringThe position of the control button bar. Options are: top, right and left.
controlsTriggerstringOptions are: hover(default) and fixed .
classstringA CSS class that is added to the surrounding container of this element in editmode
Example
{{ pimcore_areablock("myArea") }}

Methods

NameReturnDescription
getCount()intTotal count of blocks
getCurrent()intCurrent number of block (useful with area bricks)
getCurrentIndex()intGet the current index (index is different from position, as you can move block around)
getElement()arrayGet an element out of an areabrick
renderIndex()-Renders only one specific block within the areablock

How to Create Bricks for the Areablock

You can read about bricks in the Bricks section.

Limit certain Bricks for the Areablock

You can limit certain bricks for the Areablock by using limits configurations.

Example
{{ pimcore_areablock("myAreablock", {
"allowed": ["iframe","teasers","wysiwyg"],
"limits": {
"iframe": 1,
"teasers": 2
},
"limit": 5
})
}}

Using Manual Mode

The manual mode offers you the possibility to use areablocks with custom HTML, this is for example useful when using tables:

{% set areaBlock = pimcore_areablock("myArea", {"manual":true}) %}

{% do areaBlock.start() %}
<table>
{% for i in areaBlock.iterator %}
{% set info = areaBlock.buildInfoObject() %}
{% do areaBlock.blockConstruct() %}
<tr>
<td>
{% set templateParams = areaBlock.blockStart(info) %}
{% do areaBlock.content(info, templateParams) %}
{% do areaBlock.blockEnd() %}
</td>
</tr>
{% do areaBlock.blockDestruct() %}
{% endfor %}
</table>
{% do areaBlock.end() %}

Accessing Data within an Areablock Element

See Block for an example how to get elements from block and areablock editables.