TYPO3, wechselnde Grafiken im Header

Martin Hesse, 25.11.2009
TYPO3

TYPO3

In diesem Beitrag möchte ich euch zeigen, wie ihr wechselnde Kopfgrafiken in eurer TYPO3-Seite realisieren könnt. Dieser Artikel ist ein Wunsch von Thorsten – Danke dafür!

Es gibt verschiedene Wege wechselnde Kopfgrafiken in TYPO3 zu ermöglichen. Ich möchte euch jetzt hier ein paar nennen und zeigen, wie ihr das ganze einfach und schnell lösen könnt. Ich habe mir dazu ein paar fiktive Fälle einfallen lassen, welche wir abarbeiten werden.

Bei allen Fällen gehe ich von einer funktionierenden Seitenstruktur unter TemplaVoilá aus.

Fall 1 – Für jede Seite eine spezielle Grafik

Alles was ihr hierzu machen müsst ist ein Marker (TS Object Path) in TemplaVoilá erstellen und ihn in Eurem Template zuweisen. Ich habe meinen Marker “header” genannt.

Danach geht ihr in den Constant-Editor der Seite und fügt unter Setup folgendes Schnipsel ein:

<span>lib</span><span>.</span><span>header</span><span> </span><span>=</span><span> IMAGE</span>
<span>lib</span><span>.</span><span>header</span><span>.</span><span>file</span><span> </span><span>=</span><span> GIFBUILDER</span>
<span>lib</span><span>.</span><span>header</span><span>.</span><span>file</span><span> </span><span>{</span>
<span> </span><span>XY</span><span> </span><span>=</span><span> 900,135</span>
<span> </span><span>10</span><span> </span><span>=</span><span> IMAGE</span>
<span> </span><span>10</span><span>.</span><span>file</span><span>.</span><span>import</span><span> </span><span>=</span><span> uploads/media/</span>
<span> </span><span>10</span><span>.</span><span>file</span><span>.</span><span>import</span><span>.</span><span>data</span><span> </span><span>=</span><span> levelmedia:-1, slide</span>
<span>}
</span>

Denkt daran “header” mit eurem Marker zu ersetzen. Als letztes geht ihr nun in die Seiteneigenschaften der Seite, in welcher Ihr eine Kopfgrafik einarbeiten möchtet und wählt als Typ “Advanced” (Erweitert) aus. Ihr solltet dann auf den Reiter “Resources” wechseln und eure Grafik entweder hochladen oder über das Ordner-Symbol auswählen.

Resourcen-Reiter unter den Seiteneigenschaften

Resourcen-Reiter unter den Seiteneigenschaften

Fall 2 – Zufallgrafiken auf jeder Seite

In diesem Fall gibt es verschiedene Lösungsansätze. Ich möchte hier auf drei detailliert eingehen. Zum eine die Lösung über eine Extension, der Weg über TypoScript und zuletzt die Lösung über ein eigenes PHP-Script.

tx_macina_banners im Versuchstest

Für die Lösung über die Extension benötigen wir tx_macina_banners. Wir installieren die Extension über den Extension-Manager und erstellen oder benutzen ein schon vorhandenen Sysfolder für unsere Banner. In diesem erstellen wir jetzt unsere Banner bzw. Kopfgrafiken und weisen diesen die Kategorie “Top” hinzu.

Danch gehen wir in unser Seiten-Template unter SETUP und fügen folgenden Schnipsel hinzu:

<span>temp</span><span>.</span><span>banner</span><span> </span><span>&lt;</span><span> plugin.tx_macinabanners_pi1</span>
<span>temp</span><span>.</span><span>banner</span><span> </span><span>{</span><span> </span>
<span> </span><span>placement</span><span> </span><span>=</span><span> top</span>
<span> </span><span>mode</span><span> </span><span>=</span><span> random</span>
<span> </span><span>pidList</span><span> </span><span>=</span><span> 7</span>
<span> </span><span>recursive</span><span> </span><span>=</span><span> 0</span>
<span> </span><span>results_at_a_time</span><span> </span><span>=</span><span> 99</span>
<span>}</span>

<span>lib</span><span>.</span><span>header</span><span> </span><span>&lt;</span><span> temp.banner</span>

Wieder darauf achten das “header” mit eurem Marker ersetzt wird. Kurz zur Erklärung des Codes. Wir weißen hier dem temporären Platzhalter “banner” die Extension zu und konfigurieren diese wie folgt. Mit dem Wert “placement” wird die Kategorie gewählt. Ihr könnt dort zwischen left, right, bottom und top wählen. Unter “mode” wird der Anzeige-Typ festgelegt, hier habt ihr die Wahl zwischen random und all. Für “pidList” wird die UID des Sysfolder benötigt, in dem eure Banner sind. “recursive” durchsucht den Sysfolder – wie der Wert schon ahnen lässt – rekursiv. Mit “results_at_a_time” bin ich mir persönlich auch noch nicht ganz schlüssig. Wenn ich in diesem Beispiel den Wert “1″ eingebe, werden die Banner nicht durchgeschaltet, das heißt es wird immer der ein und der selbe Banner angezeigt, obwohl der mode auf “random” steht. Deshalb habe ich hier den Wert auf “99” gesetzt. Offiziell ist dies wohl der Wert der gleichzeitigen Ausgaben von Banner unter dem mode “all”.

TypoScript im Einsatz

Für unsere zweite Lösung benötigen wir nur TypoScript. Diese Lösung habe ich auf meiner Recherche gefunden und denke, dass Sie vielleicht andere gebrauchen können. Ich persönlich finde diese Lösung eher nicht so passend, da gefällt mir die Lösung in Fall 1 besser. Trotzdem möchte ich hier diese Lösung erwähnen. Zuerst wieder der Schnipsel:

<span>lib</span><span>.</span><span>header</span><span> </span><span>=</span><span> IMAGE</span>
<span> </span><span>lib</span><span>.</span><span>header</span><span> </span><span>{</span><span> </span>
 <span> </span><span>file</span><span>.</span><span>import</span><span>.</span><span>dataWrap</span><span> </span><span>=</span><span> fileadmin/kopfgrafik/{page:uid}.jpg</span>
 <span> </span><span>stdWrap</span><span>.</span><span>ifEmpty</span><span>.</span><span>dataWrap</span><span> </span><span>=</span><span> &lt;img src="fileadmin/kopfgrafik/platzhalter.jpg"&gt;</span>
<span> </span><span>}</span>

Wir weißen hier unserem Marker “header” das IMAGE-Objekt hinzu. Dieses wiederrum konfigurieren wir so, dass es uns für jede Seite eine spezielle Grafik anzeigen soll. Diese Grafik setzt sich aus dem Pfad “fileadmin/kopfgrafik/” und dem Dateinamen “Seiten-UID.jpg” zusammen. Ist diese Grafik nicht vorhanden, wird anstelle der Platzhalter unter “fileadmin/kopfgrafik/platzhalter.jpg” verwendet. Einfach, oder?

Selbst ist der Webworker

In unserem letzten Fall erstellen wir uns selber ein kleines PHP-Script und bauen dieses in unsere TYPO3-Seite ein. Dies ist vor allem dann interessant, wenn man selber noch nicht so weit ist und TYPO3-Extensions basteln kann, aber etwas ganz spezielles haben möchte! Wir erstellen uns nun also eine Datei mit namen “Bannerwechsel.php” und fügen folgenden Inhalt ein:

&lt;?php
// (Absoluten)-Pfad zum Ordner mit den Grafiken
$pfad         = 'var/www/typo3/fileadmin/kopfgrafik/';

// Erlaubte Datei-Endungen
$valid_ext    = array('jpg', 'jpeg', 'gif', 'png');

// Ordner vorhanden?!
if(is_dir($pfad))
{
 // Verzeichnis auslesen
 $handle = opendir($pfad);
 while(false !== ($file = readdir($handle)))
 {
 if($file != '.' &amp;&amp; $file != '..')
 {
 // Datei-Ext. filtern
 $file_ext    = explode('.', $file);

 // Datei-Ext. erlaubt?
 if(in_array(strtolower($file_ext[1]), $valid_ext))
 {
 // Datei dem Array hinzufügen
 $img_arr[]    = $file;
 }
 }
 }
 // Verzeichnis schließen
 closedir($handle);
}
else
{
 // Fehlerausgabe
 die('Verzeichnis ungültig oder CHMOD-Fehler');
}

// Array mischen
shuffle($img_arr);

// Bild ausgeben
echo '&lt;img src="' . $pfad . array_pop($img_arr) . '" /&gt;'
?&gt;

Ich habe den Code schon weitesgehend kommentiert. Der Code dient als reinstes Beispiel, habe ihn fix geschrieben. Das speichert ihr nun alles ab und legt die Datei in euren “fileadmin“-Ordner ab.

Nun müssen wir nur noch das PHP-Script in TYPO3 einbauen. Wie das geht, habe ich ja schon einmal erklärt. Hier nur der Code:

<span>lib</span><span>.</span><span>header</span><span> </span><span>=</span><span> PHP_SCRIPT_INT</span>
<span>lib</span><span>.</span><span>header</span><span>.</span><span>file</span><span> </span><span>=</span><span> fileadmin/Bannerwechsel.php</span>

Das ist alles! Ihr solltet nun ein wechselnden Banner haben.

Trackback - Direkt Link

10 Kommentare
Hinterlasse ein Kommentar »


  1. Thorsten Schmitz sagt:

    Eine weitere Möglichkeit (mein persönlicher Favorit) wäre, ein PHP-Skript per CSS einzufügen:
    #header{
    background-image: url(../pfad/zum/skript.php);
    }

  2. Christian sagt:

    Was ich immer gerne noch in diesem Zusammenhang verwende ist die fm_colormenue Extension. Sie ermöglicht es auch Farbwerte in eine Seite zu übernehmen. So kann man z.B. das Menü für eine Seitenrubrik in ganz anderer Farbe gestallten. Die Farbe lassen sich einfach per TS übergeben.

  3. ToKi sagt:

    Hallo Martin,
    ich habe heute erst gesehen, dass Du den Beitrag schon eingestellt hast.
    Vielen, vielen Dank dafür !!

    Grüsse
    ToKi

  4. Norbert sagt:

    Habe schon viele Seiten im Netz durchforstet, viele Codes ausprobiert, aber bisher hat nie etwas funktioniert :( hat sich da was ab version t3 4.4 verändert, dass es nicht mehr funktioniert? bin fast am verzweifeln :(

  5. Chris sagt:

    Wie setzt sich der Absolute Pfad zum verzeichnis zusammen? bzw. wo steig ich im php auf der HP ein.
     
    Danke und grüsse

    • Martin Hesse sagt:

      Mach dir am besten eine “info.php” mit folgendem Inhalt:
      < ?php phpinfo(); ?>
      Dort schaust du dir den Pfad zu dieser Datei an, der steht dort absolut drinnen. Dann weißt du, wo du ansetzen musst.

  6. Horst sagt:

    alles Dreck…. 
    nichts funktioniert…1000 Versionen…. keine Doku,…. nur Rumgesuche und dumme Kommentare… 

-