TYPO3: Headerbild pro Seite mit Vererbung

TYPO3Große Visualisierungen und Headerbilder pro Seite sind ein oft gefragtes Feature. Mit ein wenig TypoScript lassen sich solche ganz einfach realisieren. Dabei kann der Redakteur das gewünschte Bild ganz komfortabel in den Seiteneigenschaften einstellen. Das Beste: Ist für eine Seite kein Bild angegeben, wird einfach das Bild der übergeordneten Seite verwendet. So lassen sich an wenigen zentralen Stellen Visualisierungen für ganze Seitenbereiche definieren, ohne die Möglichkeit zu verlieren, auf einigen Unterseiten auch mal individuell zu werden.

Das TypoScript sieht dabei folgendermaßen aus:

1
2
3
4
5
6
lib.headerImage = TEXT
lib.headerImage {
  data = levelmedia:-1, slide
  listNum = 0
  wrap = < img src="uploads/media/ | " alt="" />
}

Und nun die Erklärung:
Zunächst wird ein einfaches Text-Objekt erstellt. Die Daten für die Ausgabe werden aus der Datenbank gelesen, und zwar aus der aktuellen Seite. Benutzt wird das Feld “media” aus der Tabelle “pages”. Allerdings – und das ist der Trick – wird es nicht direkt angesprochen, sondern über die Eigenschaft “levelmedia”. Damit können die Daten dann auch rekursiv aus den übergeordneten Seiten abgefragt werden, sollte hier nichts angegeben sein (Eigenschaft “slide”). Die Angabe “listNum = 0” sagt letztlich nur aus, dass der jeweils erste Eintrag aus diesem Feld verwendet werden soll. Schließlich wird das Ganze dann noch in einen <img>-Tag gewrappt und Voilá! – ein schickes Headerbild-Objekt.
Dieses lässt sich nun – je nach verwendeter Templating-Methode – in einen Template-Marker oder einen TemplaVoilá-Bereich mappen.

Eine Alternative ermöglicht es, dynamisch für jede Seite individuell Hintergrundbilder per CSS einzubinden:

1
2
3
4
5
6
7
8
9
10
lib.backgroundImage = TEXT
lib.backgroundImage {
  data = levelmedia:-1, slide
  listNum = 0
  wrap (
      <style type="text/css">
          body { background-image: url(uploads/media/|); }
      </style>
  )
}

Das Ganze muss dann nur noch in die Header-Daten des PAGE-Objektes eingebunden werden:

1
page.headerData.10 < lib.backgroundImage

Und schon wird kann für jede Seite ein eigenes Hintergrundbild per CSS eingebunden werden.

Ein Gedanke zu „TYPO3: Headerbild pro Seite mit Vererbung

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.