Schlagwort-Archiv: howto

TinyRTE 1.8.1 und die Links

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.


HowTo: Einbinden von canonical in den Header mit TYPO3

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.


HowTo: TYPO3-Extension manuell (ohne Backend) löschen

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.

HowTo: TYPO3 bei DomainFactory bzw. auf rpkunde-Servern installieren

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.

DF rpkunde Kundenmenu

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.

HowTo: Coda-Slider mit jQuery unter TYPO3

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.
Verzeichnisstruktur

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“.

Auswahl von slider_container -> TemlaVoila

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.

Mapping des ROOT auf das 1. DIV

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“.

Neues Feld in TV

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.

Create TO and DS for FCE slider_container

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“.

Anlegen eines TV-Attribute-Element

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.

Auswahl des Attributes für das ATTR-Mapping

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

Fertiges TV-Mapping für slider_item

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.

Save Slider-Item FCE

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“.

Auswahl des FCE für Inhalt

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.

Seite mit Container-Element als Inhalt

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“.

Auswahl des FCE für Inhalt

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.

Slider Item

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

Seite mit Container und Item

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.

Coda-Slider mit jQuery unter TYPO3 Beispiel auf Fladis Spielwiese

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.