Schritt f?r Schritt

Schritt 5 : Das Template um 3 Seiten Layouts erweitern

ERROR: Content Element with uid "26" and type "menu" has no rendering definition!

Wie machen es andere?

Je nach Template Bauart gibt es verschiedene L?sungswege wie man mehrere Seiten Layoutsmit TYPO3 realisiert

TemplaVolià

Mit TemplaVolià muss man fast zwingend f?r jedes Layout ein HTML Template erstellen und dies entsprechend mappen.

TemplaVolià ist in diesem Bericht nicht das Thema... vielleicht ein anderes mal.

Extension

Es gibt auch Extensions, welche f?r die Wahl von unterschiedlichen Layouts verwendet werden k?nnen. Die Extension rlmp_tmplselector aus dem TER von TYPO3 wird wohl f?r dies am meisten verwendet.

darauf gehe ich nicht weiter ein, Ihr k?nnt euch die Extension ja mal anschauen

typoscript

Bei reinen typoscript L?sungen sehe ich oft das per Conditions gleich ganze Templates ersetzt werden. Hier einige Beispiele, welche ich diesbez?glich gefunden habe.

In meinem Beitrag werde ich euch eine L?sungsvariante zeigen, welche ohne zusätzliche Extension und nur mit einem HTML Template auskommt.

Als erstes muss man daf?r das Template entsprechend umbauen.

Umbau des HTML Templates

Bisher wurden im Template die Marker daf?r verwendet, das nur Content aus dem TYPO3 angezeigt wird.

Oops, an error occurred! Code: 20201130063652715de3bd

Diesen Bereich bauen wir nun wie folgt um, so das der ganze HTML Code der Spalte im TYPO3 erstellt werden muss.

Oops, an error occurred! Code: 20201130063652bd15c998

Anpassen des Backends mittels TS Config

Bei den Seiteneigenschaften kann man im Backend ein Layout wählen. In der Standard Version sieht dies so aus.

Ziel ist es, anhand dieser Auswahl das Layout der Seite zu ver?dern. Durch Eingabe von TS Config Code kann man die Labels dieser Auswahl anpassen.

Oops, an error occurred! Code: 20201130063652b1f41137

In diesem Beispiel wieder als externe TS Config Datei, welche eingebunden wird.

Oops, an error occurred! Code: 20201130063652cab62bb8

Mit den || kann man die Labels in den entsprechenden Sprachen angeben, wobei das erste immer das Default Label ist.

Wie man mit dieser Auswahl das Template ver?dern kann ist einigen nicht wirklich bekannt. Aus diesem Grund folgt jetzt mein L?sungsvorschlag.

Erweitern des TypoScript Codes

Weil der HTML Code der 3 Spalten aus dem Template entfernt wurde, muss dies jetzt mit typoscript gel?st werden. F?r die Formatierung von HTML Code innerhalb dem typoscript Code gibt es verschiedene L?sungswege, somit kann jeder selber festlegen, welche Variante einem mehr zusagt.

Oops, an error occurred! Code: 20201130063652ae44bf5a

Im weiteren Verlauf werde ich vorerst die Variante 2 wählen.

Die Marker welche zuvor nur den Content styles.content.get ausgegeben haben werden mit dem ben?tigten HTML Code erweitert.

Oops, an error occurred! Code: 2020113006365257ea597a

Layouts mittels TYPO3 Conditions beeinflussen

Mit diesem L?sungsvorschlag muss man somit nicht das ganze HTML Template auswechseln, sondern je nach Wunsch nur bestimmte Marker ver?dern. Im TYPO3 kann man dies mit sogenannten Conditions l?sen.

Je nach Auswahl des Layouts werden durch die Conditions nicht ben?tigte Marker entfernt. In diesem Beispiel ben?tigen wir TSFE:page|layout.

Oops, an error occurred! Code: 202011300636522fc01477

Layouts mittels CSS Code beeinflussen

Auch wenn es nicht wirklich zu Empfehlen ist, k?nnte man Layouts auch nur durch entsprechenden CSS Code ver?dern. Das heisst, die HTML Spalten technisch im Code belassen, aber optisch mit CSS Code ausblenden.

Oft habe ich schon gesehen das unterschiedliche CSS Dateien eingebunden werden, um dies zu realisieren. Auch dies geht ebenfalls mit kleinen Anpassungen nur mit einer CSS Datei.

L?sungsvorschlag

Mein L?sungsvorschlag sieht in diesem Fall wie folgt aus. Zuerst machen wir die CSS Class des Body Elements dynamisch. Dazu passen wir das HTML Template an.


<body class="###BODY_CLASS###">

html body tag mit class

Diesen Marker f?llen wir entsprechend im typoscript Code ab.


  BODY_CLASS = TEXT
  BODY_CLASS.dataWrap = layout{page:layout} language{TSFE:sys_language_uid} type{TSFE:type} pid{TSFE:id} {field:alias}

das sind etwas mehr als die ben?tigten felder ;-)

Wenn mit PAGE.bodyTagCObject gearbeitet wird, w?rde der Code etwa so aussehen.


PAGE.bodyTagCObject = TEXT
PAGE.bodyTagCObject {
  value = <body class="layout{field:layout} language{TSFE:sys_language_uid} type{TSFE:type} pid{TSFE:id} {field:alias}">
  insertData = 1
}

Über die CSS Class layout{page:layout} ist jetzt das entsprechende Layout ver?derbar.

Als nächstes erstellen wir eine CSS Datei f?r die Layouts, welche entsprechend im aktuellen HTML Template eingebunden wird.

Oops, an error occurred! Code: 2020113006365212e9012fOops, an error occurred! Code: 20201130063652df543f56
Kleine Demo

Weil das Layout nur im Backend ge?dert werden kann, aber ich euch gerne zeigen m?chte wie dies funktioniert, habe ich auf der Beispiel Seite eine kleine Demo eingebunden. Damit kann das Layout der Seite ?ber einen URL Parameter ver?dert werden.

Bitte schaut euch den nächsten Absatz an, weshalb ihr ?ber URL Parameter nicht das Template der Seite ver?dern solltet!

# demo only
[globalVar = GP:layout = 1]
temp.htmlTemplate {
  marks {
    BODY_CLASS = TEXT
    BODY_CLASS.dataWrap = layout1
  }
}
[global]

[globalVar = GP:layout = 2]
temp.htmlTemplate {
  marks {
   BODY_CLASS = TEXT
    BODY_CLASS.dataWrap = layout2
  }
}
[global]

[globalVar = GP:layout = 3]
temp.htmlTemplate {
  marks {
    BODY_CLASS = TEXT
    BODY_CLASS.dataWrap = layout3
  }
}
[global]

Technisch gesehen ver?dere ich damit den MarkerBODY_CLASS und somit das gesamte Template der Seite.

Das HTML Ger?st bleibt unver?dert, mit CSS werden die nicht gew?nschten Spalten ausgeblendet.

Stolperfalle TYPO3 Cache - was man beachten muss

Wenn durch Conditions ?nderungen im Template oder im Seitenaufbau verursacht werden, vergisst man oft, das TYPO3 pro Variante eine Seite im Cache anlegt.

In meiner Demo wird zwar nur die CSS Class ver?dert, trotzdem speichert TYPO3 jede Seite pro URL Parameter in der Datenbank ab.

Bei einer Seite mag das gehen, sobald aber alle Seiten in 4 Varianten in der Datenbank gespeichert werden zählt sich das rasch zusammen.

Vielfach sehe ich auch das Conditions f?r Browser Varianten gemacht werden. Auch hier verhält sich TYPO3 gleich und deshalb rate ich von Browserweichen mittels Conditions ab.

Sicherlich denkt sich nun der eine oder andere, das mein L?sungsvorschlag auch Conditions verwendet. Da es sich jedoch um ein Feld im Backend handelt, kann es nur beim Wechsel des Layouts kurzzeitig zu mehreren Varianten in der Datenbank f?hren. Sobald der Cache gel?scht wird, kann nur die eine Variante gespeichert werden.

Dies war Schritt 5!

Vielen Dank f?r's rein schauen.

thefox