​Dynamic slots in pixolino templates

​Slots are sections in your template where editors may add content. Without adding slots to you template pixolino's content management features are not available.

You define a slot by calling the fx_page.slot Twig function in your page template code.

Parameters for fx_page.slot

  1. The slot name. Each slot needs a unique name within the page template.
  2. The _context variable. This is required for technical reasons but may change in the future.
  3. Object with options (if any)

Example: Defining a slot

{{ fx_page.slot("SLOT_NAME", _context) }}

Slot naming

While you cannot have multiple slots with the same name in a page template, you are encouraged to use the same slot names in different page templates. If a user changes the page template of a page, the system will move the contents of all slots of the old page template to the slots with the same name in the new page template. If you name the slots inconsistently, the system will be unable to find the correct slot for the existing content of the page and the user will have to manually move the content to the correct slots again.

Underscores “_” ar​e not allowed in slot names.

Default slot names in page templates

We highly recommend to use the following default slot names to ensure that switching templates does not require manual resorting of the content:

  • header: Should be used if there is a slot for header content.
  • headline: Should be used for the main headline <h1> (and restricted to PageObjects of type “Simple text”).
  • opener: Should be used if there is a slot with a big image (mostly at the top of the page).
  • aside: Should be used if there is a slot for side content.
  • main: Should be used for the slot containing the main content of the page.
  • map: Should be used if there is a slot especially for displaying a map.
  • address: Should be used if there is a slot especially for displaying a map.
  • footer: Should be used if there is a slot for footer content.

A slot named “headline” and another one named “main” should exist in every page template at least.


1. Restricting a slot to specific PageObjects

You may want to ensure that only specific PageObjects are available in a slot. Just register the configuration strings of the wanted PageObjects within an array under the key “page_objects” in the configuration array. By default—if there is no “page_objects” configuration—all PageObjects are available in each slot.

An empty configuration parameter ("page_objects": []) will block all PageObjects for the slot. This can be useful, if you want to allow just one or more specific Sub Templates in a slot.

For example you could restrict your slot to “Simple text” and “Rich text” PageObjects:

{{ fx_page.slot("SLOT_NAME", _context, {"page_objects": ["rte", "html"] }) }}

​2. Enabling Sub Templates for a slot

If your template includes Sub Templates, you have to enable them for each slot, in which they should be available. The necessary configuration strings (ID) are listed in the table of all Sub Templates within your Template. All you have to do, is to register the configuration strings of the required Sub Templates within an array under the key “template_sections” in the configuration array.

{{ fx_page.slot("SLOT_NAME", _context, {"template_sections": ["SUBTEMPLATE-ID"] }) }}

​3. Defining media sizes

When inserting an image to a slot the editors have to define the width of the image or video in relation to the width of the slot. Four options are available:

  • 25 % of slot width
  • 50 % of slot width
  • 75 % of slot width
  • 100 % of slot width

These options are available for four device sizes:

  • s: Smartphones
  • m: Tablets
  • l: Notebooks and regular sized desktop screens
  • xl: Large desktop and television screens

By default, editors can choose between all 16 options (4 size options for each of the 4 device sizes). It is possible to define of each slot individually, which options should be available. At least one width option for each device size is required—if you disable all options, the 100 % option will be re-enabled by default.

For that purpose you can use the key “media_column” in the options array: 

The according value is an associative array with up to four keys, which represent the device sizes: "s", "m", "l" and/or "xl". These contain each an array with one to four values, that represent the allowed width percentages: 25, 50, 75 and/or 100. 0 isn't allowed here.

For example you could restrict the possible media width on smartphones and tablets to 100% and on notebooks to 50 %, 75 % and 100 % (which implies, that the media width is not restricted for large desktops):

{{ fx_page.slot("SLOT_NAME", _context, {"media_column": {"s": [100], "m": [100], "l": [25, 50, 100]} }) }}
For images additional configuration options are available (for defining the size of the generated images as well as the aspect ratio of these images), as described in the documentation of PageObject Image.

3. Defining the render mode of a slot

You can specify, whether a slot should be rendered as block or inline element:

  • Slots which are rendered as inline element, contain a structure of <span> elements.
  • Slots which are rendered as block element, contain a structure of <div> elements.

Without specifying, a slot renders by default as block element.

​Be aware, that a slot, which is rendered as inline element, should not contain any PageObjects, which render as block element. If it contains some anyways, the validation of the whole page will fail! You may limit the slot to specific PageObjects.

​Use the key “inline_rendering” in the options array, with a boolean value to define, whether the slot should render as inline (true) or as block element (false):

{{ fx_page.slot("SLOT_NAME", _context, {"inline_rendering": true }) }}

​Demo content for PageObjects (Public BETA)

Inexperiences users will have trouble if they have to imagine how a completely empty page will look like after content has been inserted, In fact they will even have trouble to find the right slot for the right content. Thus in mind, pixolino is able to insert demo content into new pages, making it easy for editors to replace this demo content with the real life elements.

Slots which present demo content are configured by the parameter “content”. Value of this parameter is a JSON object, containing another JSON objects for each PageObject (identified by it's configuration string as value of the key “type”). The order of these JSON objects represents the order of the inserted PageObjects (with demo content) on the newly generated page.

Value of another optional key “config” is a JSON object, which contains the specific demo content configuration of the accompanying PageObject. Please refer to the documentation of the used PageObjects (and Sub Templates in general) for information about the available configuration parameters.

Example 1: Two texts separated by a border

{{ fx_page.slot("SLOT_NAME", _context, {"content": [
  {"type": "text", "config": {"copy": "Lorem ipsum"}},
  {"type": "border", "config": {"marginTop": "xl"}},
  {"type": "text", "config": {"length": 100}}
] }) }}

​Example 2: Combined with other options

{{ fx_page.slot("SLOT_NAME", _context, {
"page_objects": ["rte", "html"],
"content": [
  {"type": "text", "config": {"copy": "Lorem ipsum"}},
  {"type": "rte", "config": {"length": 500}}
] }) }}