Layout Auswahl

Auswahl via Backend Layouts

Backend Layout anlegen

Zunächst in einem Systemordner die Backend Layouts anlegen. Den Assistenten starten und die Spalten zusammenklicken oder direkt in das Feld Konfiguration schreiben:

backend_layout {
    colCount = 6
    rowCount = 3
    rows {
        1 {
            columns {
                1 {
                    name = Claim, vererbbar
                    colPos = 3
                    colspan = 6
                }
            }
        }
        2 {
            columns {
                1 {
                    name = LLL:EXT:cms/locallang_ttc.xlf:colPos.I.1
                    colPos = 0
                    colspan = 6
                }
            }
        }
        3 {
            columns {
                1 {
                    name = Footer Links
                    colPos = 10
                    colspan = 2
                }
                2 {
                    name = Footer Mitte
                    colPos = 11
                    colspan = 2
                }
                3 {
                    name = Footer Rechts
                    colPos = 12
                    colspan = 2
                }
            }
        }
    }
}

Page TS anpassen

Die normalen Layouts abschalten und BE Layouts einschalten.

TCEFORM.pages{
  # remove "Frontend Layout"
  layout.disabled = 1
 
  backend_layout.disabled = 0
  backend_layout_next_level.disabled = 0

  newUntil.disabled = 1
}

Body Tag anpassen

Das muss nicht sein, aber es ist nützlich, um CSS für die Layouts anzupassen. Hierzu das folgende Typoscript in ein Template:

lib.page.bodyTagCObject = CASE
lib.page.bodyTagCObject {
   
    # Backend Grid layout
    key.data = levelfield:-1,backend_layout_next_level,slide
    key.override.field = backend_layout
   
    # Define the default value
    default = TEXT
    default.value = <body data-spy="scroll" data-target="#navbar-section">

    # Copy the default value to 0
    0 < .default

    # Add different values for cases 1, 2 and 3
    1 = TEXT
    1.stdWrap.dataWrap = <body class="|"  data-spy="scroll" data-target="#navbar-section">
    1.stdWrap.insertData = 1
    1.value = Default-1Col pid_{field:uid}

    2 < .1
    2.value = Default-2Col-66-33 pid_{field:uid}

    3 < .1
    3.value = Default-2Col-50-50 pid_{field:uid}
}

Zusätzlich wird die Page UID und ein Tag für den Bootstrap scrollspy für den Seiten Typ 0 geschrieben.

Template auswählen

Hierzu das folgende Typoscript in ein Template:

lib.page.file.cObject = CASE
lib.page.file.cObject {
  key.data = levelfield:-1, backend_layout_next_level, slide
  key.override.field = backend_layout
  default = TEXT
  default.value = {$plugin.tx_rsystemplatebootstrap.view.templateRootPath}Page/Default-1Col.html
 
  2 = TEXT
  2.value = {$plugin.tx_rsystemplatebootstrap.view.templateRootPath}Page/Default-2Col-66-33.html
 
  3 = TEXT
  3.value = {$plugin.tx_rsystemplatebootstrap.view.templateRootPath}Page/Default-2Col-50-50.html
 
}

Content Layout

Bezeichnung der Layouts

Um die Bezeichnung der Layouts zu ändern folgendes in das TS Config der Seite einfügen:

# Inhalt der Typ Select box bei content Elementen
TCEFORM.tt_content {
  tt_content.layout.altLabels.2 = Layout 2
  tt_content.layout.altLabels.1 = Layout 1
  tt_content.layout.altLabels.0 = Layout 0
}

Content Header Layout

Anzahl

Um die Anzahl der möglichen Layouts zu verkleinern folgendes in das TS Config der Seite einfügen:

TCEFORM.tt_content.header_layout.removeItems = 1

Bezeichnung der Header Layouts

Um die Bezeichnung der Header Layouts zu ändern folgendes in das TS Config der Seite einfügen:

TCEFORM.tt_content {
  header_layout.altLabels.0 = Versteckt
  header_layout.altLabels.1 = Normal(H1)
  header_layout.altLabels.2 = Normal(H2)
  header_layout.altLabels.3 = Normal(H3)
}

Auswahl der Layouts

Um die zum Layout gehörigen Wraps zu definieren, folgendes in das Template aufnehmen:

#--------------------------------
# Content header layout
#--------------------------------
lib.stdheader >
lib.stdheader = CASE
lib.stdheader {

  key.field = header_layout
 
  default = TEXT
  default.value =  
 
  1 = TEXT
  1.field = header
  1.wrap = <h1>|</h1>
 
  2 = TEXT
  2.field = header
  2.wrap = <h2>|</h2>
   
  3 = TEXT
  3.field = header
  3.wrap = <h3>|</h3>
 
}

Seiten Layout bevor es Backend Layouts gab

Seiten Layout

Anzahl der möglichen Layouts

Um die Anzahl der möglichen Layouts zu vergrössern folgendes in typo3conf/extTables.php einfügen:

$TCA["pages"]["columns"]["layout"] = array (
  "exclude" => 1,
  "label" => "LLL:EXT:lang/locallang_general.php:LGL.layout",
  "config" => Array (
     "type" => "select",
     "items" => Array (
        Array("LLL:EXT:lang/locallang_general.php:LGL.normal", "0"),
        Array("LLL:EXT:cms/locallang_tca.php:pages.layout.I.1", "1"),
        Array("LLL:EXT:cms/locallang_tca.php:pages.layout.I.2", "2"),
        Array("LLL:EXT:cms/locallang_tca.php:pages.layout.I.3", "3"),
        Array("LLL:EXT:cms/locallang_tca.php:pages.layout.I.4", "4"),
        Array("LLL:EXT:cms/locallang_tca.php:pages.layout.I.4", "5")
     ),
     "default" => "0"
  )
);

Um die Anzahl der möglichen Layouts zu verkleinern folgendes in das TS Config der Seite einfügen:

TCEFORM.pages.layout.removeItems = 3,2

Bezeichnung der Layouts

Um die Bezeichnung der Layouts zu ändern folgendes in das TS Config der Seite einfügen:

# Inhalt der Layout Select box bei seiten
TCEFORM.pages {
  layout.altLabels.2 = 3 Spalten
  layout.altLabels.1 = 2 Spalten
  layout.altLabels.0 = Normal (1 Spalte)
}

Auswahl der Layouts

Um die zum Layout gehörigen Dateien zu wählen, folgendes in das Template aufnehmen:

[globalVar=TSFE:page|layout=1]
page.10.template.file= fileadmin/templates/template_2spalten.html
[global]

[globalVar=TSFE:page|layout=2]
page.10.template.file= fileadmin/templates/template_3spalten.html
[global]

[globalVar=TSFE:page|layout=1]
page.includeCSS.layout= fileadmin/templates/style_2.css
[global]

[globalVar=TSFE:page|layout=2]
page.includeCSS.layout= fileadmin/templates/style_3.css
[global]