Typo3 - Header Image austauschen
Die Aufgabe ein Bild im Headerbereich der Seite auszutauschen kommt ziemlich oft vor. Zur Lösung bieten sich verschiedene Möglichkeiten an:
- Flash Film im Header
- Zufällige Bildauswahl - siehe Random Image
- Auswahl über ein Inhaltselement (z.B. in der Border-Spalte)
- Auswahl über ein Extension Template
Auswahl über ein Extension Template[Bearbeiten]
Diese Möglichkeit hat den Vorteil daß man ein Bild als Default-Wert vorgeben kann und diesen Wert für verschiedene Abzweige des Seitenbaumes Überschreiben kann. Der neue Wert (=das neue Bild) gilt dann für alle Unterseiten.
Vorgehensweise:
1. HTML-Template vorbereiten Im Template wird ein Marker gesetzt. Um die Trennung von Inhalt und Aussehen der Seite zu gewährleisten machen wir das mal über einen Inline Style:
Der Marker ###HEADERIMAGE## soll später durch den Pfad zum Bild ersetzt werden. Ein weiterer Vorteil: wenn der Marker keinen gültigen Wert hat wird in den meisten Browsern einfach nichts angezeigt und nicht etwa der Marker selbst oder ein rotes Kreuzchen...
2. Extension Template anlegen
Constant Feld:
#cat=headerimage/ctext/a; typoe=string; label=Header Image headerimage=fileadmin/images/headerbild/headerbild1.jpg
Die erste Zeile sorgt dafür dass man später das Bild komfortabel im Constant Editor eingeben kann. Das kann man sich auch sparen wenn man lieber die Konstanten direkt im Constant Feld eingibt. Die zweite Zeile legt die Variable headerimage an.
Setup Feld:
temp.headerimage=TEXT
temp.headerimage.value={$headerimage}
Hier wird ein temporäres Textobjekt angelegt und mit dem Inhalt der Variablen headerimage befüllt. Wenn man nicht mit CSS arbeitet sondern das Bild direkt in den Inhaltsbereich des Templates füllen will kann man auch mit einem IMAGE Objekt arbeiten oder sogar mehrere Bilder in ein COA Objekt füllen. Dann macht Typo3 auch gleich die passenden img Tags.
3. Marker füllen Im Haupttemplate müssen wir jetzt noch das Extension Template unter Include Basis Templates einbinden und den Marker im Setup einbinden:
workOnSubpart = DOCUMENT_BODY # HEADERIMAGE marks.HEADERIMAGE < temp.headerimage ...
4. Bilder austauschen Bis jetzt steht in allen Seiten das gleiche Bild. Will man für eine Unterseite ein neues Bild verwenden legt man einfach auf der betreffenden Seite ein neues Extension Template an und verändert im Constant Editor den Pfad oder schreibt direkt im Constant Feld den neuen Pfad rein:
headerimage=fileadmin/images/headerbild/neuesHeaderbild.jpg
