TYPO3: Dynamische Headerbilder

13. Dezember 2007 | 19 Kommentare

TYPO3 Tutorials by undkonsorten Berlin

Ein oft gewünschtes Feature, ist das Einfügen von Headerbildern. Diese sollen am besten für jede Seite einzeln aus den TYPO3-Backend angegeben und auf untergeordnete Seiten vererbt werden können. Und vielleicht darfs noch eine Slideshow mit mehreren Bildern sein? Wenn’s sonst nichts ist…

Einzelne Headerbilder mit Vererbung

First Things First. Versuchen wir zunächst für eine Seite ein Bild zu bestimmen. Die Vererbung nehmen wir gleich mit.

In den Seiteneigenschaften für die betreffende Seite hängen wir dazu unter „Dateien“ das gewünschte Bild an. Soweit so einfach. Der Rest geschieht im Typoscript und im Template.

TYPO3: Seiteneigentschaften - Ressourcen, Headerbild
Abb: TYPO3: Seiteneigenschaften > Ressourcen: Bilder auswählen

Im Template sollten wir ein entsprechenden Marker einfügen, also z.B. ###HEADER###.

Im Typoscript folgt jetzt die Verknüpfung von Beidem.

Marker ansprechen

page.10.marks.HEADER = TEXT

Datenbankfeld „media“ mithilfe von des Befehls levelmedia ansprechen (dort ist unser Bild angegeben) und durch die Angabe von „slide“ den Seitenbaum rekursiv durchsuchen

page.10.marks.HEADER.data = levelmedia:-1, slide

Nur den 1. Treffer verwenden:

page.10.marks.HEADER.listNum = 0

Den Bildnamen mit dem Pfad „/uploads/media/“ wrappen und entweder als Bild oder als Hintergrundbild ausgeben.

Wichtig ist, dass TYPO3 an Seiten angehängte Bilder immer unter „/uploads/media/“ speichert, egal wo sie vorher lagen!

page.10.marks.HEADER.wrap = <img src=“/uploads/media/|“ alt=“header“/>

#page.10.marks.HEADER.wrap = <div style=“background: url(‚/uploads/media/|'“></div>

Und schon ist es einem Redakteur mit den nötigen Rechten möglich, Headerbilder einzustellen oder auszutauschen.

Let’s slide! Mehrere Headerbilder auf der gleichen Seite.

Wirklich interessant wird’s, wenn man eine Slideshow aus den Headerbildern machen soll.

Aus den Backend heraus ist es wieder sehr leicht. Man gibt einfach statt einem Bild gleich mehrere an.

Das Typoscript sorgt jetzt dafür, dass die Bildnamen von Javascript oder vielleicht auch Flash interpretiert werden können. In diesem Beispiel werden die Daten an ein Javascipt weitergegeben.

#Bildnamen an das JS übergeben(xBilderArray)
page.headerData.60 = TEXT
page.headerData.60.data = levelmedia:-1, slide
page.headerData.60.wrap = <script type=“text/javascript“>var bilderArray = „|“;</script>

Dazu legen wir zunächst einen neuen Textlayer an und führen erneut eine Suche nach dem Media-Datenbankfeld der Seite durch. Der entscheidende Unterschied zum obigen Beispiel, ist das “fehlen” von listNum = 0. Das führt dazu, dass als Dateinamen einfach kommasepariert ausgegeben werden.

Die Variable “bilderArray” kann jetzt mit Javascript weiterverwendet werden. Zunächst könnte man ein Array mit den Bildernamen bauen:

bilderArray = bilderArray.split(”,”);

Von hier ab kann jeder sein eigenes Javascript erdenken, um den Bildwechsel wirklich zu realisieren. Mit Javascipt-Bibliotheken wie Mootools sind aufwendige Überblendungen und andere Effekte möglich, aber oft reicht es mit

document.getElementById(”id-des-bildes”).src = ‚/uploads/media/‘ + andererbildname

die Bilder auszutauschen.

Wie genau die Umsetzung aussehen könnte, würde in dieser Anleitung zu weit gehen. Aber zumindest der Grundstein sollte damit gelegt sein.

Viel Erfolg!

Ähnliche Artikel:

Meta-Daten

Autor: undkonsorten, Thomas Alboth
Tags+Kategorien: , , , , , , , , ,
Kategorie: CMS, Tutorial, TYPO3



19 Kommentare

Auch mal Kommentieren:

Kommentar