Create backend layout
For the sake of order, one page should be provided for storing the backend layouts. If it is a website where all editors have access to the entire page tree, this can be the start page. Otherwise, a system folder is created for this.
A new backend layout record can be created in the list view.
The backend layout wizard can now be opened via the "Wizard" icon under Configuration. Here you can design your own backend layout. The column number is later used in the TypoScript to read out the content.
Set up backend layout
In order for the layouts to be displayed on all pages in the page properties, the ID of the system folder with the backend layouts must be specified in Page TSconfig:
##id storagepage of gridlayout
TCEFORM.pages.backend_layout.PAGE_TSCONFIG_ID=29
TCEFORM.pages.backend_layout_next_level.PAGE_TSCONFIG_ID=29
When setting up the editors, make sure that they also have access to the system folder!
The standard layout for all subpages is then defined in the page properties on the start page. This means that the editor does not have to select a layout for every newly created page, but only for pages that deviate from the standard layout.
If you do not want the editor to have the option of not selecting a layout, i.e. "None", in order to be able to work with the old backend view, you can hide this option as follows:
##hide no backend layout label
TCEFORM.pages.backend_layout_next_level.removeItems= -1
TCEFORM.pages.backend_layout.removeItems= -1
There is also an empty selection field for the standard layout. This can also be provided with a label. In this way, an editor can also recognize which layout is preset.
##give empty label a definition
TCEFORM.pages.backend_layout.altLabels.0 = Predefined layout
Link backend layout with frontend
First, a CSS class for the body tag is defined in the setup depending on the selected layout and assigned to page.bodyTagCObject:
##Backend grid view defines body class for css
temp.selectbodytag = CASE
temp.selectbodytag {
key.field = backend_layout
key.ifEmpty.data = levelfield:-2, backend_layout_next_level, slide
default = TEXT
default.value = layout1
1 = TEXT
1.value = layout1
2 = TEXT
2.value = layout2
3 = TEXT
3.value = layout3
stdWrap.wrap =
}
In the example below, a subpart "contentWrap" is defined in the HTML template. As a COA, it can be divided into several sub-areas.
contentWrap.10 is a div that occurs in all backend layouts.
contentWrap.20 is only output for layouts with ID 1 or 2.
contentWrap.20.20 is only output for layouts with ID 2.
contentWrap.20.30 is only output for layouts with ID 3.
contentWrap.30 occurs again in all backend layouts.
With the if query, the value is first checked for the value in the "Backend layout (for subpages of this page)" field in the pages above it. If there is a value in the "Backend layout" field, this overwrites the previous result and checks whether this value matches the value.
page = PAGE
page {
##css class in bodytag according to layout
bodyTagCObject < temp.selectbodytag
10 = TEMPLATE
...
10.subparts {
contentWrap = COA
##Top box
contentWrap.10 < styles.content.get
contentWrap.10.wrap = <div id="contentTop">|</div>
##floated boxes wrapped in a box
contentWrap.20 = COA
contentWrap.20.if {
## backend layout query by uid
value = 1,2
isInList.data = levelfield:-2,backend_layout_next_level,slide
isInList.override.data = TSFE:page|backend_layout
}
contentWrap.20.wrap = <div> | </div>
contentWrap.20.10 < styles.content.get
contentWrap.20.10.select.where = colPos = 1
contentWrap.20.10.wrap = <div id="contentLeft">|</div>
contentWrap.20.20 = COA
contentWrap.20.20 {
if {
value = 2
isInList.data = levelfield:-2,backend_layout_next_level,slide
isInList.override.data = TSFE:page|backend_layout
}
10 < styles.content.get
10.select.where = colPos = 2
10.wrap = <div class="contentMiddle">|</div>
}
contentWrap.20.30 = COA
contentWrap.20.30 {
if {
value = 3
isInList.data = levelfield:-2,backend_layout_next_level,slide
isInList.override.data = TSFE:page|backend_layout
}
10 < styles.content.get
10.select.where = colPos = 5
10.wrap = <div class="contentMiddle">|</div>
20 < styles.content.get
20.select.where = colPos = 6
20.wrap = <div class="contentMiddle">|</div>
}
contentWrap.20.40 < styles.content.get
contentWrap.20.40.select.where = colPos = 3
contentWrap.20.40.wrap = <div id="contentRight">|</div>
##bottom box
contentWrap.30 < styles.content.get
contentWrap.30.select.where = colPos = 4
contentWrap.30.wrap = <div id="contentBottom">|</div>
}
}
This page contains automatically translated content.