Backend layouts 

Backend layouts were initially introduced in order to customize the view of the Page module in TYPO3 Backend for a page, but has then since grown also in Frontend rendering to select for example Fluid template files via TypoScript for a page, commonly used via data:pagelayout.

A page module with a backend layout that has 3 content areas.

Backend layouts are organized in rows and columns. Content areas can span multiple rows and or columns. They cannot be nested. For nested layouts in the backend use an extension like b13/container .

The page TSconfig for the backend layout above can be found in the site package tutorial: Create the backend page layouts.

For extended examples have a look at the predefined backend layouts of the bootstrap package (GitHub).

BackendLayouts.[backendLayout]

BackendLayouts.[backendLayout]
Type
array
Path
mod.web_layout.BackendLayouts

title

title
Type
string or language identifier

The title of the backend layout. It will be displayed in the page properties in the backend.

icon

icon
Type
string, extension path to an image file

The icon to be displayed in the page properties.

EXT:bootstrap_package/Configuration/TsConfig/Page/Mod/WebLayout/BackendLayouts/subnavigation_right_2_columns.tsconfig 
mod.web_layout.BackendLayouts.subnavigation_right_2_columns {
    icon = EXT:bootstrap_package/Resources/Public/Icons/BackendLayouts/subnavigation_right_2_columns.svg
}
Copied!

config.backend_layout

config.backend_layout

colCount

colCount
Type
integer

Total number of columns in the backend layout.

rowCount

rowCount
Type
integer

Total number of rows in the backend layout.

rows.[row].columns.[col]

rows.[row].columns.[col]

name

name
Type
string or language identifier

Name of the input area where content elements can be added. Will be displayed in the Page module.

colPos

colPos
Type
integer, 0 - maxInt

When content elements are added to this area, the value of colPos

identifier

identifier
Type
string

An identifier that can be used by the page content DataProcessor to identify the content elements within this area.

It is a speaking representation for the colPos, such as "main", "sidebar" or "footerArea".

slideMode

slideMode
Type
string, "" (empty string), "slide", "collect", "collectReverse"

An identifier that can be used by the page content DataProcessor to identify the content elements within this area.

slide
If no content is found, check the parent pages for more content
collect
Use all content from this page, and the parent pages as one collection
collectReverse
Same as "collect" but in the opposite order

colspan

colspan
Type
integer, 1 - colCount

Can be used if the content element area should span multiple columns as for the "Jumbotron" example in the example above.

rowspan

rowspan
Type
integer, 1 - rowCount

Can be used if the content element area should span multiple rows.

Example: Use a backend layout in the page content data processor 

Define the backend layout via page TSconfig, for example in the site:

config/sites/my-site/page.tsconfig 
mod.web_layout.BackendLayouts {
    default {
        title = Default
        config {
            backend_layout {
                colCount = 2
                rowCount = 2
                rows {
                    1 {
                        columns {
                            1 {
                                name = Jumbotron
                                colPos = 1
                                identifier = jumbotron
                                slideMode = slide
                                colspan = 2
                            }
                        }
                    }

                    2 {
                        columns {
                            1 {
                                name = Left
                                colPos = 0
                                identifier = left
                            }

                            2 {
                                name = Right
                                colPos = 2
                                identifier = right
                                slideMode = collectReverse
                            }
                        }
                    }
                }
            }
        }
    }
}
Copied!

Configure the output via TypoScript, using the content object PAGEVIEW and the DataProcessor page-content.

config/sites/my-site/setup.typoscript 
page = PAGE
page {
    10 = PAGEVIEW
    10 {
        paths.10 = EXT:my_sitepackage/Resources/Private/Templates/
        dataProcessing.10 = page-content
        dataProcessing.10.as = myContent
    }
}
Copied!

Use the identifiers of the columns in the Fluid template:

EXT:my_sitepackage/Resources/Private/Templates/Pages/Default.html 
<f:render partial="Jumbotron" arguments="{jumbotronContent: myContent.jumbotron}"/>
<main>
	<f:for each="{myContent.left.records}" as="contentElement">
	   <f:cObject
			typoscriptObjectPath="{contentElement.mainType}"
			data="{contentElement.rawRecord}"
			table="{contentElement.mainType}"
		 />
	</f:for>
</main>
<aside>
    <f:render partial="Aside" arguments="{content: myContent.right}"/>
</aside>
Copied!