Auf Twitter suchte Bastian die Windows-Version 4.2.9 von Imagemagick. Auf der Projektseite ist diese aber nicht mehr verfügbar und der scheinbar einzige Link typo3.sunsite.dk ist mittlerweile stillgelegt. So habe ich mich also auf die Suche begeben und war erfolgreich. Es ist z.b. in dem TYPO3 WAMP-Installer von Alwin Viereck enthalten.

Ich habe es daraus entpackt und stelle das ZIP hier zur Verfügung:

Hier geht es zum Download von ImageMagick 4.2.9 für Windows

Ich hoffe dies hilft allen die verzweifelt nach einem der folgenden Wörter gesucht haben: imagemagick-win-4.2.9.zip imagemagick-win-4.2.9.exe download imagemagick windows static linked statisch convert.exe combine.exe sunsite.dk typo3 graphicsmagick im

Während des Urlaub hatte ich nun endlich einmal genug Zeit mir das Buch “TYPO3 4.2 E-Commerce” von Inese Liberte und Edgars Karlsons aus dem Packt Publishing Verlag durchzulesen. Der Untertitel “Design, build, and profit from a sophisticated feature-rich online store using TYPO3” verspricht, dass es sich um ein grundlegendes und umfangfreiches Werk handelt. Auf 189 Seiten soll mit TYPO3 Schritt für Schritt ein Online-Shop erstellt und optimiert werden.

Doch für wen wurde dieses Buch eigentlich geschrieben? ”If you want to create a captivating online shop using TYPO3 and optimize your profit, this book is for you. Some knowledge of TYPO3, PHP, and TypoScript is required“, so die Autoren. Klingt für mich zunächst nach einem hohen Ziel, neben der technischen Implementierung auch noch auf die Gewinnmaximierung via Online-Shop einzugehen. Damit beschäftigen sich an anderer Stelle ja ganze eigene Bücher.

Hier das Inhaltsverzeichnis.

Im ersten Kapitel wird sich um die Installation von TYPO3 auf dem Server gekümmert. Jeder der das schon einmal gemacht hat wird bestätigen können, dass dies nicht umbedingt trivial ist. Umso erstaunter war ich, dass sich das Buch damit auch beschäftigt. Wie zu erwarten kann diese grundlegende Einführung aber nicht sonderlich tief sein und nur ein Beispielsystem behandeln. Sicher mal gut durchzulesen, aber für eine echte produktive Installation mir persönlich zu oberflächlich. Hier kommt der Administrator um eigenes Wissen nicht herum, das über “some TYPO3, PHP, and TypoScript” hinausgeht. Im gleichen Kapitel wird auch noch die Installation von Extensions behandelt (tt_products).

Das nächste Kapitel widmet sich der Template Konfiguration, wobei sowohl TypoScript als auch das eigentliche “HTML-Template” gemeint ist. Schön fand ich, dass auch gleich auf die Konfiguration mit mehreren Sprachen eingegangen wird. Weniger schön, dass TemplaVoila nicht verwendet wird. Dies ist aber wohl Geschmackssache. Auch in diesem Kapitel wird sich eng an die vorgegebene Konfiguration gehalten. Jeder der davon abweicht kommt nicht drum herum sich näher mit dem System zu beschäftigen, so dass das Beispiel vielleicht zum Üben gut geeignet ist, für einen produktiven Shop aber sicher noch einiges an Nacharbeit erforderlich macht. 
Am Ende des 2. Kapitel wird noch die Upgrade-Möglichkeit von TYPO3 vorgestellt und die verschiedenen Versionsnummern erklärt (Minor, Major und Patch-Versionen).

In Kapitel 3 geht es dann endlich mit E-Commerce los. Es werden kurz die 3 zur Zeit populärsten Extensions verglichen (tt_products, extendedshop, commerce). Schluss endlich kommen die Autoren zu dem Ergebnis, dass tt_products im Bezug auf Leistung/Auwand/Features das beste Produkt ist. Hier gilt es meines Erachtens aber noch einmal genau zu betrachten, was ein Shop-Betreiber überhaupt an Modulen braucht (Payment, WaWi, …..). 
Wie bereits angedeutet wird für den Demo-Shop tt_products verwendet. Hierfür wird nun die Anbindung von PayPal zur Abrechnung erklärt. Besonders gut fand ich, dass explizit auf die Möglichkeit des PayPal-Testaccount hingewiesen wird. Die Einrichtung an sich ist recht trivial. 
Auch das 3. Kapitel endet mit einem Abschnitt der nicht so richtig zum eigentlichen Inhalt des Kapitels passen mag. Dieses Mal wird erklärt, wie man eine Extension auf den neuesten Stand bringt. Wer das aber nicht ohnehin schon kann, der wird wohl kaum einen Shop mit TYPO3 aufsetzen wollen.

Kapitel 4 trägt den Titel “Catalogue – Setting Up / Online Store Requirements“. Hier geht es jetzt um die Konfiguration von tt_products, die recht anschaulich erklärt wird. Auch auf den Import von Produkt-Daten und das dazugehörige Mapping CSV->tt_products wird eingegangen. Es werden Produkte dem Shop hinzugefügt, also Produkt-Datensätze angelegt und editiert. Bilder dazu hinterlegt und das TypoScript-Setup (auch hin Hinblick auf mehrere Sprachen) angepasst.

In Kapitel 5 dreht sich alles um unsere (zukünftigen) Kunden. Das automatische Anlegen von User-Accounts mit Hilfe der Extension sr_feuser_register sowie die Verbindung zu einer User-Gruppe. Sehr nützlich in diesem Abschnitt fand ich die Erläuterung, wie man für diese Gruppen separate Nachlässe im System hinterlegen kann. Dies wird anhand einer TypoScript-Konfiguation gelöst.

Kapitel 6 schweift zunächst mal wieder vom Thema E-Commerce ab. Es geht um die Navigation auf der Seite. Konfiguration von Menus (GMenu, TMenu …) und deren bester logischer Aufbau. 
Besser gefällt mir da der Abschnitt, der sich um die Suche mit Hilfe von indexed_search kümmert. Diese wird installiert und konfiguriert sowie ins Template eingebunden. Wenn man einen Shop hat, der genauso aufgebaut ist und es keine weiteren Stolpersteine gibt, funktioniert die gezeigte Konfiguration sicherlich. Über die zahlreichen Stolpersteine, die indexed_search bietet, wird aber der tatsächliche Shop-Betreiber sicher stolpern und anderswo eine Lösung finden müssen. So fehlt mir hier zum Beispiel die in vorherigen Kapitel aufgeführte Konfiguration für mehrsprachige Seiten.

Das folgende Kapitel widmet sich der Abwicklung von Zahlung und Bestellungen. Die Autoren wählen hier die Extension shop_manager von Semyon Vyskubov, die eine Ergänzung für tt_products ist. Sie ermöglicht die Verwaltung vom Backend aus. Die Installation erfolgt am Besten aus dem TER und sollte keine Schwierigkeiten aufwerfen.
Im nächsten Teilabschnitt wird der Einsatz von SSL erläutert. Da es hier in der Realität genügend verschiedene Setups gibt, kann das Aufgeführte lediglich als Beispiel dienen. Die Konfiguration von SSL, die ja zunächst nichts mit TYPO3 zu tun hat, sollte für den erfahrenen Administrator aber kein Problem darstellen, sofern er hinreichend Rechte und Möglichkeiten beim Hosting-Provider hat. Die Konfiguration von TYPO3 zur Verwendung von SSL ist gut und ausreichend im vorliegenden Buch erklärt.

Das “Administrative Interface in TYPO3″ ist Gegenstand von Kapitel 8. Wie schon es öfteren in diesem Buch hat das meines Erachtens nichts mit E-Commerce zu tun und gehört eher zu den Grundlagen bei der Arbeit mit TYPO3. Zu Gute halten muss man den Autoren, dass diese Kapitel schön die verschiedenen Möglichkeiten der Arbeit im Backend erläutern. Es ist das umfangreichste Kapitel des Buches und durchaus lesenswert.

Die Optimierung des Shop ist Inhalt von Kapitel 9. SEO ist hier das Stichwort und die vorgestellten Möglichkeiten zeigen den Handlungsbedarf für den Shop-Betreiber klar auf. Das hier ein Buch auf wenigen Seiten alles abdeckt, was das Arbeitsgebiet einer ganzen Branche ist war nicht zu erwarten. So kann man die Erläuterungen nur als die grundlegenden Dinge bzgl. SEO verstehen. Immerhin wird die Einbindung einer XML-Sitemap für Google und Co. und die Konfiguration von Stichworten (Meta-Tags) erläutert.

Im letzten Kapitel behandeln die Autoren das Marketing der Seite. Ein paar grundlegende Überlegungen zum Shop, dessen Struktur und Ziel werden besprochen. Ein solches Thema ist aber mehr betriebswirtschaftlich relevant als, dass es etwas mit TYPO3 und E-Commerce zu tun hat. Es rundet das Buch aber als letztes Kapitel ab.

Fazit:

Die Autoren haben hier versucht ein Buch zu schaffen, dass alles abdeckt was es benötigt um einen Online-Shop erfolgreich mit TYPO3 zu betreiben. Meine Erwartungen an das Buch wurden nicht ganz erfüllt, da ich annahm ein Buch zu erhalten, dass auf die verschiedenen technischen Möglichkeiten tiefer eingeht. Es handelt sich aber meines Erachtens viel mehr um ein Buch für Leute, die sich schonmal kurz mit TYPO3 beschäftigt haben und damit nun einen Shop betreiben wollen. Der fortgeschrittene TYPO3-Administrator erfährt nicht viel Neues, kann das Buch aber durchaus als Leitfaden verwenden. Der blutige Anfänger hingegen wird ohne weitere Hilfe aus der Community wohl nicht weit kommen. Der Demo Shop ist zwar sicher ganz nett, bietet aber für einen produktiven Shop zu wenig Individualismus (Design, Features …). So kann die umgesetzte Lösung lediglich als erster Schritt ins Online-Geschäft dienen, die noch jede Menge Nacharbeit erfordert. 
Kaufen sollte das Buch jeder, der sich das erste Mal mit E-Commerce beschäftigt, aber idealerweise schon TYPO3- und weitere Erfahrung rund um Webdesign und Implementierung einer Webseite mitbringt. Der Spagat der Autoren sowohl technische als auch betriebswirtschaftliche Themen im Buch abzudecken ist vielleicht gut gemeint, wirkt aber fehl am Platz, da dies in der Realität auch nicht von einer Person erledigt wird.

Daten zum Buch:

Sample-Chapter
Inhaltsverzeichnis
Produkt-Seite beim Verlag

Sprache : English
Seiten : 212
ISBN : 184719852X
ISBN 13 : 9781847198525

Autoren: Edgars Karlsons, Inese Liberte

Wer TinyRTE in TYPO3 als Editor einsetzt, und auf Version 1.8.1 geupdatet hat, wird u.U. bemerkt haben, das gesetzte Links auf eine interne Seite nicht mehr so recht funktionieren. Bei mir in Verbindung mit RealURL, bzw. SimulateStatic aufgetreten.

Ursache dafür ist ein kleines Häkchen in der Extension-Konfiguration. Einfach den Haken bei “Store link attributes” entfernen und schon sollte alles wieder so sein wie gewohnt.

Das “canonical”-Tag ist in aller Munde. Es dient dazu duplicate content für die Suchmaschinen identifizierbar zu machen.

Unter TYPO3 hat man automatisch schon doppelte Inhalte, da eine Seite z.B. unter: www.domain.de/index.php?id=1 oder unter www.domain.de/?id=1 erreichbar ist. Die Beispiele lassen sich natürlich beliebig fortsetzen.

Da TYPO3 das (noch) nicht von Haus aus als headerData mitbringt, müssen wir das halt händisch basteln.

Um einen enstprechenden Tag in der Form

<link href=”http://www.domain.de/seite.html” rel=”canonical”/>

zu bekommen, bemühen wir mal ein bisschen TypoScript und basteln uns etwas zusammen:

# baseURL setzen (falls nicht schon vorher geschehen) WICHTIG den / am Ende nicht vergessen
config.baseURL = http://www.domain.de/

# holen des URL-Teil hinter dem ersten /
temp.activepage = TEXT
temp.activepage.typolink {
parameter.data = TSFE:id
returnLast = url   
}

# Erstellung des Header-Link-Tag in mehreren Teilen
page.headerData = COA
page.headerData.10 = TEXT
page.headerData.10 {
value = <link rel=”canonical” href=”
} 
page.headerData.20 = TEXT
page.headerData.20 {
value < config.baseURL
}  
page.headerData.30 < temp.activepage
page.headerData.40 = TEXT
page.headerData.40 {
value = ” />  
}

Bei meinem kleinen Test hat das ganze sowohl auf einer Seite mit index.php?id=XY als auch mit RealURL funktioniert. Besonders schön ist, das durch die Nutzung der TYPO3 Linkerzeugung auch bei Aufruf einer Seite via index.php-Parameter die RealURL-Seite als canonical angegeben wird.

Ebenso wird durch die Einbindung von baseURL die Variante abgefangen, dass der Webauftritt unter verschiedenen URL (z.B. www.domain.de und www.domain.com) erreichbar ist.

Wäre noch interessant, ob die Lösung auch bei anderen klappt. Wie sieht es mit CoolURI aus? Über Feedback hier als Kommentar würde ich mich freuen.

Ein paar Quick ‘n dirty Notizen:

Altes Verzeichnis sichern:

tar cfzv verzeichnisname.tar pfad/zum/verzeichnis/

Alte Datenbank sichern:

mysqldump -p datenbank -u datenbankuser > datenbank.sql

Daten auf neuen Server übertragen

rcp datei user@server.tld:datei

Daten auf neuem Server entpacken

tar xzf verzeichnis.tar

Datenbank wieder einspielen:

mysql -u datenbankuser -h datenbankserver –database datenbankname -p < datenbank.sql

…. dann noch Install-Tool aufrufen und DB-Connection-Infos für neuen Server aktualisieren (oder direkt in der localconf.php ändern).

Es kann vorkommen, da installiert man eine Extension und nichts geht mehr. Wenn also kein Zugriff mehr auf das Backend möglich ist, muss die Extension manuell raus.

Dazu muss die Datei “localconf.php” im Ordner “typo3conf/” editiert werden. Dies geschieht entweder per SSH direkt auf der Shell oder nach FTP-Download.

Auf jeden Fall musst Du in dieser Datei nach dem (letzten) Eintrag von

$TYPO3_CONF_VAR['EXT']['extList']=

suchen. Dort löschst Du dann den Extension-Key der Extension, die Du als Übeltäter vermutest. Anschließend löschst Du noch alle “tempCached*.*” Dateien im gleichen Verzeichnis.

Nun solltest Du das Backend wieder aufrufen können. Die Extension ist zu diesem Zeitpunkt nur “deaktiviert”. Über den Extension-Manager kannst Du sie vollends wieder vom System entfernen.

Wer seine Domains bei DomainFactory (DF) oder einem Reseller von Ihnen hat, kann TYPO3 meist recht problemlos laufen lassen. Ob man bei einem solchen Reseller ist, erkennt man am eigenen Kundenmenu. Dies ist in der Regel über eine Subdomain die mit rpkunde beginnt zu erreichen (Beispiel: http://rpkunde.domain.de) und sieht in etwa wie auf dem Bild aus. Natürlich muss das gewählte Hostingpaket alle Voraussetzungen wie Datenbank etc. haben.

Diese Anleitung funktioniert aber auch bei anderen Providern. Problematisch ist eigentich immer nur die Behandlung der Symlinks.

TYPO3 installieren in 11 Schritten. Zunächst wird eine SSH-Verbindung zum Server aufgebaut, sodass Du dort auf der Shell arbeiten kannst. Wir starten im ROOT der Shell:

mkdir typo3cms
cd typo3cms
wget http://heanet.dl.sourceforge.net/sourceforge/typo3/typo3_src-4.2.0.tar.gz
wget http://switch.dl.sourceforge.net/sourceforge/typo3/dummy-4.2.0.tar.gz
tar xzf typo3_src-4.2.0.tar.gz
tar xzf dummy-4.2.0.tar.gz
rm -f *.tar.gz
mv dummy-4.2.0/ demo
rm -f demo/index.php
cp typo3_src-4.2.0/index.php demo
touch demo/typo3conf/ENABLE_INSTALL_TOOL

Damit ist TYPO3 im Prinzip fertig um über die Weboberfläche weiter konfiguriert zu werden. Zunächst musst Du nun in Deinem Kundenmenu die Domain einrichten (auf das /typo3cms/demo) Verzeichnis (siehe Bild oben). Ebenso brauchst Du natürlich eine Datenbank. Wenn das alles eingerichtet ist, kannst Du unter http://www.domain.de/typo3/install/index.php?mode=123&step=1&password=joh316 den Installer aufrufen. Hier wird nun in 3 Schritten die grundlegende Installation gemacht (Datenbank einrichten …)

Zur Erklärunge die obigen Schritte nochmal im Einzelnen:

mkdir typo3cms

Wir erstellen ein Verzeichnis in dem wir alle unsere TYPO3-Installationen sammeln.

cd typo3cms

Wechsel in das soeben erstellte Verzeichnis

wget http://heanet.dl.sourceforge.net/sourceforge/typo3/typo3_src-4.2.0.tar.gz

Download der TYPO3-Sourcen. Hier die zur Zeit (Juni 2008) aktuelle Version 4.2.0. Den Link findet man über die typo3.org Downloadseite.

wget http://switch.dl.sourceforge.net/sourceforge/typo3/dummy-4.2.0.tar.gz

Download des TYPO3-Dummy-Paket. Dies beinhaltet die Struktur einer “leeren” Seite, auf die wir aufsetzen.

tar xzf typo3_src-4.2.0.tar.gz

Entpacken der Sourcen

tar xzf dummy-4.2.0.tar.gz

Entpacken des Dummy-Paket

rm -f *.tar.gz

Entfernen der Archiv-Dateien

mv dummy-4.2.0/ demo

Umbenennen des Dummy-Verzeichnisses in “demo”. Anstelle von “demo” empfehle ich die Verwendung des Domain-Namens, auf dem die Installation später laufen soll. Oder natürlich auch jeder andere Name. Wichtig ist nur, dass Du ihn dir merkst, da später die Domain im Kundenmenu darauf konfiguriert werden muss.

rm -f demo/index.php

Entfernen des Symlink im Dummy-Paket. Das hat den Hintergrund, dass bei der DomainFactory Datei-Symlinks nicht unterstützt sind, bzw. vom Apache-Webserver nicht befolgt werden. Deswegen müssen wir hier ein wenig nachhelfen.

cp typo3_src-4.2.0/index.php demo

Kopieren der index.php vom TYPO3-Source-Verzeichnis in das Dummy-Paket. Der im vorigen Schritt entfernte Symlink verweist auf diese Datei. Durch diese beiden Schritte haben wir nun den gleichen Stand wie vorher. Wichtig ist, dass wir im Falle eines Updates der TYPO3-Sourcen auf diese Datei erneut kopieren.

touch demo/typo3conf/ENABLE_INSTALL_TOOL

Aktvieren des Install-Tool, indem wir eine leere Datei anlegen.

Updaten der TYPO3-Installation:

Bei erscheinen einer neuen TYPO3-Version kann man nun einfach die neue Version per

wget <url>

in das “typo3cms”-Verzeichnis downloaden. Danach mit

tar xzf <dateiname>

entpacken. Damit steht die neue Version bereits zur Verfügung. Vor der Aktivierung solltest Du aber im Install-Tool, nochmal ein Datenbank-Compare machen um etwaige Differenzen zu entdecken. Ein Datenbank-Backup ist an dieser Stelle sowieso empfehlenswert. Dies geschieht am einfachsten über die phpMySql-Oberfläche aus dem Kundenmenu.

Nun muss nur noch der Symlink innerhalb des “demo”-Verzeichnisses geändert werden. Dies geschieht über

rm -f typo3_src
ln -s -f ../typo_src-<neu-versions-nummer> typo3_src

Wir löschen erst den alten Symlink innerhalb unseres “demo”-Verzeichnis und legen anschließend einen neuen an, der auf die neuen Sourcen zeigt. Damit ist die neue Version auch schon online. Im Install-Tool sollte nun noch ein Compare bei den Datenbank-Tools (Punkt 2 – Database Analyser) gemacht werden, um etwaige Änderungen an der Datenbank-Struktur zu übernehmen.

Weitere Ideen:

Solltest Du eine größere Anzahl an TYPO3-Installationen haben, die Du regelmässig auf die neue Version umstellen willst, empfiehlt ich eine weitere Ebene mit Symlinks einzubauen. Der Symlink in den einzelnen Seiten, zeigt dann wiederrum auf einen “produktiv”-Symlink, welcher auf die eigentlichen Sourcen zeigt. Auf diese Weise musst Du im Falle eines Updates nur den “produktiv”-Symlink ändern und hast alle Installationen upgedatet.

Vorne weg möchte ich gleich sagen, dass die hier aufgeführte Lösung sicherlich nicht die Beste und Eleganteste ist. Ich wollte einfach nur mal wissen, wie man einen Coda-Slider (benannt nach dem Sliding-Effekt auf der Webseite der Software Coda) unter TYPO3 realisiert und habe deshalb einfach mal losgelegt. Das Ganze sollte möglichst mit Bordmitteln funktionieren und so, dass ein normaler Redakteur die einzelnen Tabs auch noch mit Inhalt füllen kann.

Alternativ könnte man das Ganze sicherlich auch als PHP/HTML einbinden, oder sich eine Extension für die Inhaltselemente schreiben.

Für Verbesserungen/Korrekturen/Hinweise/Kritik bin ich natürlich stehts dankbar. Hinterlasse doch einfach einen Kommentar am Ende dieser Seite.

Tutorial zur Implementierung eines Coda-Slider mit jQuery unter TYPO3:

Ich gehe mal davon aus, dass Du Dich im TYPO3-Backend hinreichend gut auskennst. TypoScript, TemplaVoila, CSS und HTML solltest Du schon mal gehört haben, damit Du das Beispiel hier nachvollziehen kannst. Ebenso musst Du diverse Dateien auf Deinen Webserver kopieren (FTP o.ä.) und bearbeiten.

Voraussetzungen:

laufende TYPO3-Installation mit TemplaVoila
Download von jQuery
Download von Coda-Slider (von Niall Doherty) (Version 1.1.1 wurde hier verwendet)

Für dieses Beispiel nehme ich die Verzeichnisstruktur (innerhalb von fileadmin/ ) meiner Spielwiese. Für Deine Implementierung musst Du also ggf. die Pfade ein wenig anpassen.

Ich habe im Wesentlichen ein Verzeichnis “Javascripts” für jQuery und das Coda-Slider-Plugin und eines mit meinem Seitentemplate für TemplaVoila (hier “Spielwiese“) für CSS und HTML-Dateien.

Eine solche oder ähnliche Struktur solltest Du Dir nun auch anlegen und die heruntergeladenen Dateien dorthin kopieren. Beim Coda-Slider-Plugin ist auch eine Beispiel-HTML-Datei, die als Demo dient. Hieraus stehlen wir uns ein paar Code-Fragmente um sie in TemplaVoila als “flexibles Content Element (FCE)” zu verwenden. Zudem solltest Du Dir das Beispiel mal angucken, damit Du weißt, wovon hier die Rede ist.

Wir legen nun zwei neue HTML-Dateien an:

slider_container.html (dient uns als Container-Element für den Slider)

<div class=”slider-wrap”>
<div id=”slider1″ class=”csw”>
<div class=”panelContainer”>
<!– here goes the content –>
</div><!– .panelContainer –>
</div><!– #slider1 –>
</div><!– .slider-wrap –>

slider_item.html (nimmt später die Inhalte der Tabs auf)

<div class=”panel” title=”Item Title”>
<div class=”wrapper”>
<!– content –>
</div> <!– wrapper –>
</div> <!– panel –>

Diese beiden Dateien verwenden wir nun zur Erstellung zweier FCE. Dazu wählen wir aus dem Backend-Menü den Punkt Dateiliste (Hinweis: Anleitung zur Umstellung des TYPO3-Backend auf deutsche Sprache findest Du hier) und begeben uns in das Verzeichnis wo obige Dateien abgelegt sind. Nun wählen wir zunächst die “slider_container“-Datei durch klicken auf das Symbol vor der Datei aus und klicken auf den Punkt “TemplaVoila“.

Es öffnet ich eine Seite zur Bearbeitung der TemplaVoila (TV) Daten. Hier legen wir die Struktur der FCE fest.

Das ROOT-Element wird auf das erste DIV (slider-wrap) gemappt. Als Typ wird “OUTER” gewählt, damit das DIV-Tag erhalten bleibt.

Im Anschluss muss ein neues Element angelegt werden. Ich habe es mal “Item” benannt, da es später die einzelnen Tab (Items) beinhalten soll. Die Benennung ist egal, aber als “Editing Type” wähle “Content Elements“.

Dieses Element wird auf das innerste DIV (panelContainer) mit Typ “INNER” gemappt.

Damit ist das erste FCE, das uns als Container (Sammelbecken für die eigentlichen Inhalte) dient auch schon fertig. Schnell das ganze via “Save as” abspeichern. Als Titel wählte ich “slider container“. Wichtig ist die Auswahl des Template Type “Content Element“. Durch betätigen von “CREATE TO and DS” ist das FCE fertig.

Nachdem die Vorgehensweise eines Mapping ja nun klar ist ;-) können wir also ganz fix auch die zweite HTML-Datei in ein FCE “verwandeln”. In der Dateiliste nun die slider_item.html auswählen und die Option TemplaVoila – nach klick auf das Icon – auswählen.

Auch hier ist das Mapping nicht sonderlich kompliziert. Das ROOT-Element wird mit Typ “OUTER” auf das “panel“-DIV gemappt. Ein neues Feld mit Namen “content area” anlegen. Der Editing Type ist wieder “Content Elements“. Gemappt wird dieses Element auf den “wrapper“-DIV mit Typ “INNER“.

Da bei dem Coda-Slider-Plugin jedes Tab einen eigenen Namen (title) besitzt, muss hierfür auch noch ein weiteres Element angelegt werden. Den Namen können wir dann später beim Anlegen des Seiteninhalts für jeden Tab vergeben. Das weitere Element nenne ich “Title of Slider Item“. Als Mapping-Type wird nun “Attribute” gewählt und als Editing-Type “Plain input field“.

Beim Mappen wird wieder das “panel”-DIV gewählt. Anschließend kann man auswählen auf welches HTML-Attribute gemappt wird. Hier wählen wir das “title”-Tag.

Somit sollte das zukünftige FCE dann in etwa so aussehen.

Nun muss das Ganze nur noch via “save as” gesichert werden und DS und TO erstellt werden. Auch hier wieder beachten, dass der Template Type auf “Content Element” steht.

An diesem Punkt ist schon fast alles erledigt. Es fehlt nur noch ein wenig TypoScript, eine Prise CSS-Styling und das eigentliche Anlegen der Inhalte.

Wir müssen TYPO3 natürlich sagen, das wir jQuery benutzen wollen. Es ist also notwendig die Javascript-Dateien in das Seiten-Rendering einzubauen. Für dieses Beispiel binde ich die entsprechenden Anweisungen via TypoScript direkt in die Header-Daten der Seite ein. Dazu lege ich auf der Seite des Beispiels ein Extension-Template an, indem ich den entsprechenden TS-Code zur Einbindung hinterlege. Zusätzlich füge ich auch gleich noch die von Coda-Slider mitgelieferte CSS-Datei ein.

page {
includeJS.file1 = fileadmin/javascripts/jquery-1.2.6.min.js
includeJS.file2 = fileadmin/javascripts/codaslider/jquery-easing.1.2.pack.js
includeJS.file3 = fileadmin/javascripts/codaslider/jquery-easing-compatibility.1.2.pack.js
includeJS.file4 = fileadmin/javascripts/codaslider/coda-slider.1.1.1.js
includeJS.file5 = fileadmin/javascripts/my_jquery.js
}
page.headerData.90 = TEXT
page.headerData.90.value (
<link href=”fileadmin/templates/spielwiese/css/slider.css” rel=”stylesheet” type=”text/css” />
)

Die CSS-Datei lässt sich selbstverständlich auch über TV einbinden, was ich persönlich aber meist nicht mache, da ich es via TS wesentlich leichter und vor allem übersichtlicher finde.

Wie zu sehen ist, binden wir auch eine “my_jquery.js” ein. Ein guter Zeitpunkt diese Datei anzulegen und mit folgendem Inhalt zu füllen. Sie dient der Initialisierung des jQuery-Slider.

my_jquery.js

jQuery(window).bind(“load”, function() {
jQuery(“div#slider1″).codaSlider()
// jQuery(“div#slider2″).codaSlider()
// etc, etc. Beware of cross-linking difficulties if using multiple sliders on one page.
});

Da bei TYPO3 jede Seite durch die index.php geroutet wird, bin ich auf einen kleinen Bug gestoßen, der sich durch einen kleinen Hack des Coda-Slider-Plugin lösen lässt. Ohne die folgende Änderung wird beim Wechsel von einem Tab zum nächsten immer die Startseite aufgerufen, da die Verlinkung auf /#<tab-nummer> gesetzt wird. Es muss also noch der Seitenparameter (z.B. index.php?id=5 / bzw. /seitenname/) eingefügt werden. Dazu öffne die Datei “coda-slider.1.1.1.js” und ändere in Zeile 66 den Teil der Link-Erzeugung von:

<a href=’#” + (n+1) + “‘>” + jQuery(this).attr(“title”) + “<\/a>

in

<a href=’”+location+”#” + (n+1) + “‘>” + jQuery(this).attr(“title”) + “<\/a>

Es wird also noch ein “location” eingefügt. Sonderlich sauber ist die Lösung sicher nicht, aber ich werde das Ganze mal genauer untersuchen und ggf. mit dem Autor Kontakt aufnehmen.

Kommen wir zum Erstellen der Inhalte. Der Slider soll auf einer Seite eingebunden werden. Da wir das Ganze via FCE realisiert haben, kann er neben anderem Content auf der Seite stehen. Sehr praktisch. Für das Beispiel hier bleibt es aber der einzige Inhalt der Seite. Nachdem wir eine Seite erstellt haben, legen wir auf dieser Seite einen neuen Inhalt an. Zunächst brauchen wir einen “Container” für unsere einzelnen Tabs und wählen demnach das FCE “slider container“.

Im Folgenden geben wir nur eine Überschrift ein, da wir noch keine weiteren Seiteninhalte haben. Wählen wir nun im Menü “Seite” und anschließend im Seitenbaum die soeben angelegte Seite, so sollte sich ein solches Bild ergeben.

Innerhalb dieses “Slider Container” werden nun die einzelnen Tabs (Slider Item) angelegt. Dies geschieht über die Auswahl des “+“-Symbol (siehe Bild) innerhalb des Slider-Containers. Diesmal wählen wir als Inhalt das FCE “slider item“.

Im folgenden Dialog geben wir neben einer Überschrift auch einen Titel an. Dies ist das Feld, das wir vorhin über das ATTR-Element in TemplaVoila angelegt haben. Es ist also der Inhalt des Title-Tag, den das Coder-Slider-Plugin nutzt um die dynamische Tab-Navigation (siehe Beispiel aus dem Coda-Slider-Plugin) zu generieren.

Das Ganze wird nun via “speichern & schließen” übernommen. Es ergibt sich folgendes Bild der Seite.

In der obigen “content area” können wir nun wiederum beliebige Inhalte einfügen. Von normalen Text über Bilder, oder auch Videos. Für jedes Tab ist nun der vorige Schritt zu wiederholen, wobei darauf zu achten ist, dass alle Tab (Item) innerhalb des Slider Container liegen.

Wir haben also nichts anderes gemacht, als uns ein Gerüst gebaut, auf das das jQuery-Plugin zugreift. Zunächst einen Container für die einzelnen Tab. Und anschließend fügen wir beliebige Tabs (Items) ein.

Nun können wir uns das Ergebnis im Frontend angucken. Je nach Seitenlayout kann es natürlich sein, dass das eingebundenen CSS des Plugins das Layout durcheinander bringt. Aus diesem Grund habe ich – für dieses Beispiel etwa – die Tab-Navigation ausgeblendet und die vor/zurück Pfeile etwas angehübscht (tolles Wort!). Dazu habe ich schamlos die Idee bei hype geklaut.

Nach ein wenig weiteren CSS-Feinschliff lässt sich dann etwa ein Coda-Slider wie hier auf der Spielwiese relativ leicht einsetzen.

Das war’s!

Nochmal der Hinweis, dass ich mir sicher bin, dass es hier sicherlich elegantere und bessere Lösungsmöglichkeiten gibt. Aber es ist eben auch auf diese Art und Weise relativ einfach mit Bordmitteln möglich. Der gewählte Lösungsweg bietet meiner Ansicht nach auch noch hinreichend Möglichkeit die einzelnen Tab-Inhalte zu bearbeiten (für einen einfachen Redakteur). Man könnte auch z.B. das Slider-Item FCE so gestalten, dass dort direkt ein RTE zur Texteingabe angezeigt wird. Bei obiger Lösung können wir aber in jedem TAB wiederum mit weiteren FCE weiterarbeiten (z.B. 3-spaltiges Layout innerhalb des Tab).

Wenn diese Anleitung für dich hilfreich war, so hinterlasse mir doch einen Kommentar. Das motiviert mich weitere Tutorials zu schreiben. Natürlich darfst Du auch Fehler petzen oder Fragen stellen.

Beschreibung: Umstellung der Sprache des TYPO3-Backend auf deutsch
Letztes Update: 30.05.2008
Diese Anleitung bezieht sich auf TYPO3 Version 4.2.0, sollte aber auch mit früheren/späteren Versionen funktionieren.
Bilder werden durch anklicken in voller Größe gezeigt.

Nach dem Einloggen in das TYPO3 Backend erscheint dies standardmäßig in englischer Sprache:

Zunächst müssen wir die deutschen Sprachdateien installieren. Die geschieht über den Extension-Manager der sich im linken Menü befindet. Nach wählen des “Ext Manager” wählen wir “Translation handling” in der Auswahlbox.

Nun wird eine Auswahlliste der verfügbaren Sprachen angezeigt, aus der wir “German – [German]” auwählen. Durch betätigen der Schaltfläche “Save selection” wird unsere Auswahl anschließend gespeichert.

Jetzt muss die Installation auf den aktuellen Stand gebracht werden. Dies bedeutet, dass die deutschen Übersetzungen geladen/installiert werden. Dazu betätigen wir die Schaltfläche “Update from repository“.

Der Erfolg des Updates wird uns angezeigt.

Zum Abschluss muss die Sprache noch für den angemeldeten Benutzer umgestellt werden. Dies geschieht über “User settings” im Menü.

Dort gibt es jetzt bei Auswahl von “Language” die Option die deutsche Sprache durch Auswahl von “German – [German]” zu aktivieren.

Durch betätigen von “Save selection” aktivieren wir die Änderung für den angemeldeten Benutzer. Um sicher zu gehen, dass uns auch alles auf deutsch angezeigt wird, wird empfohlen sich einmal vom Backend ab- und wieder anzumelden.