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

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:

<?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 != '.' && $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 '<img src="' . $pfad . array_pop($img_arr) . '" />'
?>

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.

Was ich noch ankündigen möchte ist ein neues Projekt von mir. Das MH-Dev.-Board!

Wie man aus den Name vllt. schon ableiten kann, ist es ein Forum. Das ganze Forum wird unter der GPL released und ist somit Open-Source! Jeder der Lust hat kann mithelfen und jeder der möchte kann es nutzen.

Das Forum selber basiert auf dem Zend Framework, welches unter der BSD Lizenz steht.

Den aktuellen Status würde ich momentan als Alpha-Status einschätzen. Es muss noch viel gemacht werden (100erte Sprach-Keys ins deutsche lokalisieren, tonnen an Features hinzufügen) aber es verfügt jetzt schon über einen großen Funktionsumfang!

Zum Beispiel kann man jeden einzelnen Beitrag bewerten, es gibt ein ausgeklügeltes Level-System für die Benutzer, eine sehr umfangreiche Administration für Moderatoren und Administratoren und vieles vieles mehr!

Was eventuell auch noch zu erwähnen ist und was mich z.B. bei dem phpBB gestört hat, es hat ein System welches bei *neuen Beiträgen/Themen zuerst auf die Moderation von einem Moderator wartet, bis der Beitrag / das Thema dann letztendlich selber freigeschaltet ist. Dies verhindert, dass die nervigen Spameinträge sofort sichtbar sind.

* das System schaut ob der Benutzer bereits ein Beitrag oder Thema hat, welches veröffentlicht wurde. Diese Option und viele weitere lassen sich in den Einstellungen ausschalten

Eine Demo des Forums gibt es bereits hier: http://forum.mh-dev.de

Den Quellcode und ein bereits hochgeladenes Komplett-Paket gibt es bei Google-Code. Beachtet das seitdem Upload des Komplett-Paket einiges geändert wurde! Deshalb ist es ratsam über SVN (siehe Google-Code) die neuste Version herunterzuladen.

* UPDATE *

Wie ihr vielleicht sehen könnt, habe ich das Theme hier nun aktualisiert. Ganz final ist es noch nicht, da ich ein paar Sachen noch extra für den Blog umbauen muss aber es geht so schonmal. Wer MH-Dev. noch nicht besucht hat, kann das gerne nun auch noch einmal nachholen

Das Problem ist meistens nur, dass einem Ideen fehlen, worüber man eigentlich bloggen könnte. Themenvorschläge sind also immer wieder gerne gesehen.

Ich denke es geht mit dem Blog wieder richtig los ab der 2. August-Woche.

Ich hoffe das bald TYPO3 v4.3 erscheint, damit ich mich mehr wieder dem Branchenbuch (mh_branchenbuch) widmen kann. Geplant sind auch noch ein paar andere Extensions, welche meiner Meinung nach ganz gut gebraucht werden könnten.

TYPO3

Im dritten und letzten Teil der Artikel-Serie kommen wir zur Konfiguration mit Plesk. Die Grundlegende Schritte sind zwar die gleichen aber es gibt hier und da ein paar kleine Unterschiede.  Zuerst müssen wir auch hier die “PHP.ini” oder besser eine “vhost.conf” anlegen bzw. bearbeiten.

Plesk – PHP.ini Konfiguration

Genau wie in ispCP müssen wir auch hier wieder den open_basedir-Pfad anpassen. Dazu müssen wir zuerst einmal in folgendes Verzeichnis gehen: “/srv/www/vhosts/meine-domain.de/conf“. Ihr solltet dort nun mindestens eine Datei mit Namen “httpd.include” vorfinden. Generell könnten wir diese schon bearbeiten aber wenn ihr etwas in Plesk machen solltet, wird dies wieder von Plesk überschrieben und ist daher nicht sehr ratsam. Deswegen legen wir jetzt eine neue Datei mit Namen “vhost.conf” an. Sollte die Datei bei euch schon vorhanden sein dann bearbeitet diese einfach.

In dieser Datei schreiben wir nun folgenden Eintrag rein:

&lt;Directory "/srv/www/vhosts/<em>meine-domain.de</em>/httpdocs"&gt;
 php_admin_value open_basedir "/srv/www/vhosts/<em>meine-domain.de</em>/:<strong>/var/software2/typo3_src-4.3.8/</strong>:/tmp"
&lt;/Directory&gt;

Achtung! Beachtet bitte das ihr den Pfad (/var/software2/typo3_src-4.3.8) an euer Verzeichnis anpasst.

Wir müssen nun jetzt noch Plesk sagen das wir hier eine Änderung getätigt haben, dies machen wir wie folgt (Console (STRG+T)):

/usr/local/psa/admin/bin/websrvmng --reconfigure-vhost --vhost-name=<em><strong>meine-domain.de</strong></em>

Und danach müssen wir auch hier wieder den Webserver neustarten. Der Befehl kann auch hier wieder variieren. Bei mir wäre dies folgender Befehl:

/etc/init.d/apache2 restart

Nachdem wir nun den Webserver neugestartet haben, können wir nun auch das TYPO3-Dummy-Paket anlegen.

Plesk – Dummy-Paket anlegen

Wir gehen nun zuerst in unser Webvereichnis. In Plesk ist das in etwa folgender Pfad: “/srv/www/vhosts/meine-domain.de/httpdocs“. Danach wechseln wir wieder in die Console (STRG+T) und benutzen diesmal WGET um das Dummy-Paket (Version 4.2.8, 05.07.2009) herunterzuladen.

wget http://downloads.sourceforge.net/sourceforge/typo3/dummy-4.2.8.tar.gz?use_mirror=dfn

Jetzt aktualisieren wir wieder das Fenster indem wir die Tastenkombination “STRG+R” benutzen und sollten dann die Datei “dummy-4.2.8.tar.gz” (kann je nach Version variieren) wiederfinden. Diese müssen wir nun auch wieder extrahieren, indem wir, wie oben schon beschrieben, einen Rechtsklick auf die Datei machen und dann “Benutzerdefinierte Befehle” -> “UnTar/GZip…” auswählen. Nachdem wir die Ansicht wieder aktualisiert haben, haben wir nun ein neuen Ordner mit Namen “dummy-4.2.8” im Verzeichnis. Das Archiv “dummy-4.2.8.tar.gz” können wir nun löschen (auswählen und “ENTF”-Taste drücken).

Wir wechseln nun einmal in das “dummy-4.2.8″-Verzeichnis und markieren alle Dateien indem wir “STRG+A” drücken. Danach schieben wir die ganzen Elemente mit gedrückter Maustaste auf den übergeordneten Ordner “..“. Wir bestätigen das Verschieben mit “Ok” und gehen wieder ein Verzeichnis zurück, indem wir nun auf die “..” klicken. Folgende Verzeichnisse sollten wir dann sehen:

Den Ordner “dummy-4.2.8” können wir nun auch wieder löschen. Wir sehen jetzt auch 3 Dateien die sich von den anderen ein bisschen unterscheiden. Ich rede hier speziell von den Dateien “index.php”, “t3lib”, “typo3″ und “typo3_src”. Dies sind jetzt Symlinks die noch keinen richtigen Pfad besitzen bzw. keinen gültigen. Symlinks sind generell nichts anderes als Verknüpfungen auf andere Dateien. Sozusagen eine kleine Umleitung

Was wir jetzt machen müssen, wir müssen den Symlink “typo3_src” den Pfad zu unserer TYPO3-Source geben. Dies geht ganz einfach!

Ein Rechtsklick auf “typo3_src” und dann “Bearbeite Verknüpfung” auswählen. Dort geben wir nun folgenden Pfad ein: “/var/software2/typo3_src-4.2.8“. Bitte denkt wieder daran, das ihr den Pfad an euren anpasst. Nachdem wir den Pfad mit einem Klick auf “Ok” bestätigt haben, sollte sich die Ansicht aktualisieren und die Symlinks sollten nun folgende Gestalt angenommen haben:

Das war alles! Ihr habt nun ein TYPO3-Paket angelegt, ohne ein zusätzliches Source-Paket zu verwenden. So könnt ihr nun mit vielen weiteren Webpaketen verfahren. Ihr könnt natürlich auch mehrere verschiedene Versionen* verwenden und diese dann je nach Wunsch einfach angeben in eurem Symlink. Bei einem Update überschreibt ihr einfach das Sourcepaket und alle anderen Pakete die darauf zugreifen sind auch Up2Date.

* Wenn ihr verschiedene Versionen verwenden wollt, achtet darauf das ihr das neue Verzeichnis dann wieder im “open_basedir”-Parameter angebt. Ihr könnt dort einzelne Verzeichnisse immer mit einem Doppelpunkt “:” trennen.

<em>meine-domain.de</em>

TYPO3

In Teil 2 der Artikel-Serie kommen wir nun zum etwas schwierigeren Teil der Installation. Im zweiten Teil möchte ich euch ein von zwei Szenarien vorstellen. Einmal ein Server mit Plesk und einmal ein Server mit ispCP. Dies hat zum Grund das wir einige Konfigurationen am Webserver vornehmen müssen und dieses je nach Controll-Panel etwas anders ausfallen können.

In Teil 2 von 3 zeige ich euch die Installation mit ispCP.

ispCP – PHP.ini Konfiguration

Bei ispCP haben wir 2 getrennte Ordner für die Konfiguration und für die eigentlichen Daten der angelegten Domain / Webseite. Wir gehen zunächst in die Konfiguration, bei mir ist dies folgender Pfad: “/var/www/fcgi/meine-domain.de/php5“. In diesem Ordner befindet sich eine Datei mit namen “php.ini”. Diese öffnen wir und gehen zu Zeile 217. In dieser Zeile sollte nun in etwa folgendes stehen:

open_basedir = "/var/www/virtual/<em>meine-domain.de</em>/:/usr/share/php/"

Dies ändern wir wie folgt ab:

open_basedir = "/var/www/virtual/<em>meine-domain.de</em>/:/var/software2/typo3_src-4.3.8:/usr/share/php/"

Achtung! Beachtet bitte das ihr den neu eingefügten Teil (/var/software2/typo3_src-4.3.8) an euer Verzeichnis anpasst.

Mit dem neu hinzugefügten Pfad erlauben wir der Domain bzw. dem Projekt auf dieses Verzeichnis zugreifen zu können.

Wir müssen nun jetzt noch den Webserver neustarten und danach sollte diese Änderung in Kraft getreten sein. Den Webserver starten wir jetzt wieder über die Console (STRG+T) neu. Der Befehl kann auch hier wieder variieren. Bei mir wäre dies folgender Befehl:

/etc/init.d/apache2 restart

Nachdem wir nun den Server neugestartet haben, können wir nun das TYPO3-Dummy-Paket anlegen.

ispCP – Dummy-Paket anlegen

Wir gehen nun zuerst in unser Webvereichnis. Bei mir  wäre dies folgender Pfad: “/var/www/virtual/meine-domain.de/htdocs“. Danach wechseln wir wieder in die Console (STRG+T) und benutzen diesmal WGET um das Dummy-Paket (Version 4.2.8, 05.07.2009) herunterzuladen.

wget http://downloads.sourceforge.net/sourceforge/typo3/dummy-4.2.8.tar.gz?use_mirror=dfn

Jetzt aktualisieren wir wieder das Fenster indem wir die Tastenkombination “STRG+R” benutzen und sollten dann die Datei “dummy-4.2.8.tar.gz” (kann je nach Version variieren) wiederfinden. Diese müssen wir nun auch wieder extrahieren, indem wir, wie oben schon beschrieben, einen Rechtsklick auf die Datei machen und dann “Benutzerdefinierte Befehle” -> “UnTar/GZip…” auswählen. Nachdem wir die Ansicht wieder aktualisiert haben, haben wir nun ein neuen Ordner mit Namen “dummy-4.2.8” im Verzeichnis. Das Archiv “dummy-4.2.8.tar.gz” können wir nun löschen (auswählen und “ENTF”-Taste drücken).

Wir wechseln nun einmal in das “dummy-4.2.8″-Verzeichnis und markieren alle Dateien indem wir “STRG+A” drücken. Danach schieben wir die ganzen Elemente mit gedrückter Maustaste auf den übergeordneten Ordner “..“. Wir bestätigen das Verschieben mit “Ok” und gehen wieder ein Verzeichnis zurück, indem wir nun auf die “..” klicken. Folgende Verzeichnisse sollten wir dann sehen:

Den Ordner “dummy-4.2.8” können wir nun auch wieder löschen. Wir sehen jetzt auch 3 Dateien die sich von den anderen ein bisschen unterscheiden. Ich rede hier speziell von den Dateien “index.php”, “t3lib”, “typo3″ und “typo3_src”. Dies sind jetzt Symlinks die noch keinen richtigen Pfad besitzen bzw. keinen gültigen. Symlinks sind generell nichts anderes als Verknüpfungen auf andere Dateien. Sozusagen eine kleine Umleitung

Was wir jetzt machen müssen, wir müssen den Symlink “typo3_src” den Pfad zu unserer TYPO3-Source geben. Dies geht ganz einfach!

Ein Rechtsklick auf “typo3_src” und dann “Bearbeite Verknüpfung” auswählen. Dort geben wir nun folgenden Pfad ein: “/var/software2/typo3_src-4.2.8“. Bitte denkt wieder daran, das ihr den Pfad an euren anpasst. Nachdem wir den Pfad mit einem Klick auf “Ok” bestätigt haben, sollte sich die Ansicht aktualisieren und die Symlinks sollten nun folgende Gestalt angenommen haben:

Herzlichen Glückwunsch! Ihr habt nun ein TYPO3-Paket angelegt, ohne ein zusätzliches Source-Paket zu verwenden. So könnt ihr nun mit vielen weiteren Webpaketen verfahren. Ihr könnt natürlich auch mehrere verschiedene Versionen verwenden und diese dann je nach Wunsch einfach angeben in eurem Symlink. Bei einem Update überschreibt ihr einfach das Sourcepaket und alle anderen Pakete die darauf zugreifen sind auch Up2Date.

In Teil 3 zeige ich euch, wie ihr das ganze mit Plesk hinbekommt.