By Sebastiaan de Jonge, published on Thursday, July 26, 2012 at 09:30

Templating within TYPO3 can be tricky. Especially if we want to keep in mind that our editors may want to select different layouts and templates for different pages. Since version 4.5 TYPO3 provides us with backend layouts. But what exactly are they? And what can we do with them?

Backend layouts allow your editors and administrators to see content in a more "visual" way. Of course it's no frontend editing, but the solution within the backend itself is pretty neat. Let's see what it looks like when we are editing a page with backend layouts configured inside Web > Page.

That already looks a lot more organized than a simple list of elements, doesn't it?

The layouts can be selected inside the Appearance tab of your page properties. There is even the possibility to automatically set a layout for the next levels of pages.

Creating backend layouts is actually a piece of cake. Go to your website root inside the TYPO3 page tree under the Web > List, and create a new record. Now select Backend Layout.

Backend layouts can't be created on the absolute root level (page ID = 0, the page with the TYPO3 icon). 

As you see, a backend layout contains only 4 basic elements. A title, an icon, a description and a configuration. Title, icon and description are up to you, configuration is done using a special editor. 

Something worth mentioning is that you should name your columns properly and assign them the right column numbers. These are the column numbers that will be stored inside the tt_content table (under colPos).

The numbers correspond with the following styles.content.get objects:

  • 0 = styles.content.get 
  • 1 = styles.content.getLeft 
  • 2 = styles.content.getRight 
  • 3 = styles.content.getBorder

The name of the column is displayed on the page on which you are adding the content under the position field. The list of options of course changes, depending on which layout is selected in the page properties.

This editor allows you to create any column setup, I would suggest you play around with it a little. Sometimes you will need to add and remove columns to get the desired visual setup.

If you need more than the default 4 columns, that's no problem. Just copy one of the style.content.get objects and change the colPos in the where clause of the selection. Like so in your TypoScript setup:

# Create a new content selector for column 5
styles.content.getFooter < styles.content.get
styles.content.getFooter.select.where = colPos=5
# Assign the new content selector
page.10.marks.CONTENT_FOOTER < styles.content.getFooter
Unfortunately the default setup stops here, it's just a backend way of visualizing what would be displayed on the frontend. But where TYPO3 stop, we continue. With a small block of TypoScript code we can connect our backend layouts to our frontend templates. It just requires a one-time configuration for each layout and template combination by using TypoScript.
page.10 = TEMPLATE
page.10 {
    template = CASE
    template {
        key.data = levelfield:-1,backend_layout_next_level,slide
        key.override.field = backend_layout
        # Single column
        1 = FILE
        1.file = fileadmin/sites/com/sebastiaandejonge/demo/templates/single_column.html
        # Single column, with sidebar
        2 = FILE
        2.file = fileadmin/sites/com/sebastiaandejonge/demo/templates/single_column_with_sidebar.html
    }
}
The numbers used (1 and 2) are actually the IDs of backend layout records. The are configured with the corresponding files.In some cases you may want to give specific classes or IDs to the body tag, in those case you can use a simular construction.
page.bodyTagCObject = CASE
page.bodyTagCObject {
    key.data = levelfield:-1,backend_layout_next_level,slide
    key.override.field = backend_layout
    1 = TEXT
    1.value = <body id="single-column">
    2 = TEXT
    2.value = <body id="single-column-with-sidebar">
}
Toni
Toni - Friday, March 8, 2013 at 15:00

Hey Sebastiaan and thank you for great article.

I am still kinda newbie in TYPO3 and TypoScript.Would it be possible to effect just the content without changing the HTML?

Somethink like where where:

1 = FILE
1.file = ....

is COA or something in which i can define for example.

marks.VISUAL < styles.content.get
marks.VISUAL {
  select.where = colPos = 0
  wrap = |
}
marks.SIDEBAR< styles.content.get
marks.SIDEBAR{
  select.where = colPos = 1
  wrap = |
}
marks.CONTENT < styles.content.get
marks.CONTENT {
  select.where = colPos = 2
  wrap = |
}

etc.

so that is actully look same in BE and FE with just selecting BE Layout of page?

Nitin Parri
Nitin Parri - Wednesday, July 2, 2014 at 08:34

Maybe it is nice to mention that you can use colspan in the config of a column.

columns {
    1 {
        name = Top
        colPos = 0
        colspan = 2
    }
}
bhavana
bhavana - Friday, August 1, 2014 at 07:26

Thanks for sharing wonderful information about typo3 multishop development.