TYPO3: tt_content rendern (nach Layout, Spaltenposition, etc.)

Oft kommt es vor, dass man Content per TS-Skript speziell rendern will. Beispiele sind: Alle Elemente der linken Spalte bekommen einen schönen Rahmen und einen “Mehr”-Link am Ende, Elemente im Text sollen unterschiedlich dargestellt werden mit Hilfe der Option “Layout”, etc.

Variante 1: Layout-Feld nutzen

Sowohl Seiten als auch Textelemente besitzen das Feld “Layout”, mit denen dieses festgelegt werden kann.

Layout-Feld der Seite

Will man verschiedene Seiten darstellen, beispielsweise mit zwei oder drei Spalten, dann kann man das Layout-Feld der Seite verwenden. Im Setup kann man das folgendermaßen festlegen:

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

Damit werden neben dem Grundtemplate (nennen wir es templateA.html zwei weitere Templates festgelegt. Man kann dem Template auch noch Namen geben, indem man im Page (!) TSConfig die Labels ändert:

TCEFORM.pages {
  layout.altLabels.0 = Template A
  layout.altLabels.1 = Template B
  layout.altLabels.2 = Template C
}

Layout-Feld im Content

Normalerweise bestimmt das Layout-Feld in Content-Elementen die Art der Überschrift. Mann kann mit Hilfe dieses Feldes jedoch auch das Layout des gesamten Contents anpassen, indem man z.B. diesen mit einem wrap umgibt. Das Vorgehen ist folgendes (aus www.typo3wizard.com):

page.10=TEMPLATE
page.10{
  template = FILE
  # einbinden des templates (html datei mit marker)
  template.file = fileadmin/templates/template.html
  # subpart auf den gearbeitet wird
  workOnSubpart = DOCUMENT
  subparts{
    CONTENT < styles .content.get
    CONTENT.renderObj.stdWrap.innerWrap.cObject = CASE
    CONTENT.renderObj.stdWrap.innerWrap.cObject {
      key.field = header_layout
      default = TEXT
      default.value = <div class="weiss">|</div>
      1 = TEXT
      1.value = <div class="gruen">|</div>
      2 = TEXT
      2.value = <div class="grau">|</div>
    }
  }
}

Hier werden drei Layouts definiert: das Standard-Layout und zwei weitere. Jedes Contentelement wird beim Rendern mit den entsprechenden div-Tags komplett umgeben, je nach Layout. Auch hier kann man im Page TSConfig die Labels anpassen:

TCEFORM.tt_content {
  header_layout.altLabels.2 = Grauer Hintergrund
  header_layout.altLabels.1 = Gruener Hintergrund
  header_layout.altLabels.0 = Normal(weiss)
}

Es geht jedoch noch flexibler…

Variante 2: tt_content selbst rendern

Will man den Content noch weiter anpassen, kann man mit Hilfe von renderObj das Layout selbst anpassen. Hier ein Snippet zur Demonstration:

    LEFTSIDEBAR = CONTENT
    LEFTSIDEBAR.table = tt_content
    LEFTSIDEBAR.select {
      pidInList = this
      orderBy = sorting
      where = colPos=1
      languageField = sys_language_uid
    }
    LEFTSIDEBAR.renderObj = COA
    LEFTSIDEBAR.renderObj {
      5 = HTML
      5.value = <div class="box"><img src="fileadmin/images/template/ecken_oben.gif" width="190" height="4"><div class="boxheader"><h3>
      10 = TEXT
      10.field = header
      15 = HTML
      15.value =</h3></div><div class="boxcontent">
      20 = TEXT
      20.field = bodytext
      30 = HTML
      30.value = <br /><a href="http://www.google.de">Zu Google!</a>
      35 = HTML
      35.value = </div><img src="fileadmin/images/template/ecken_unten.gif" width="190" height="4"></div>
    }


Mit wraps wäre das Beispiel wahrscheinlich etwas schöner, aber es geht hier ja nur um die Demonstration: Knackpunkt hier ist der Aufbau des Contents: Die Überschrift wird in durch eigene Elemente komplett eigenständig gerendert, der Text kommt in eine Box darunter und am Ende wird noch ein Link zu Google angehängt. Umgeben werden die einzelnen Felder von entsprechenden HTML-Befehlen. Das Ergebnis könnte dann ungefähr folgendermaßen aussehen:

Links

• www.typo3wizard.com
• www.pi-phi.de