TYPO3 auf UTF-8 umstellen (z.B. für russische/kyrillische Inhalte)

Wer vorhat Sprachen wie russisch oder arabisch in TYPO3 anzulegen, der wird schnell auf einige Schwierigkeiten stoßen. Da die hierfür benötigten Zeichen nicht im ISO-Zeichensatz enthalten sind, muss das TYPO-System auf UTF-8 umgestellt werden. Belässt man es bei ISO, dann werden die russischen Zeichen als ASCII angezeigt (&#1044 anstatt Д usw.).

Auf meiner Suche nach einer Lösung des Problems bin ich auf einen sehr hilfreichen Artikel gestoßen, der sehr ausführlich und vollständig erklärt, wie man ein TYPO3-System auf UTF-8 umstellen kann.

http://typo3.schloebe.de/mehrsprachigkeit/russische-kyrillische-inhalte-in-typo3/

In TYPO3-Extension zwischen LIVE und Entwurfsumgebung unterscheiden

Wenn man an einer TYPO3-Extension entwickelt, die bereits im Live-System eingesetzt wird und dabei die Änderungen erst einmal nur im Entwurfs-Workspace sichtbar machen möchte, dann kann man innerhalb der Extension folgendermaßen zwischen Live- und Entwurfsumgebung unterscheiden:

if($GLOBALS['TSFE']->sys_page->versioningPreview) {
    // Entwurfsumgebung
}

Auf diese Weise kann man den neuen Code erst einmal in Ruhe dort testen, ohne dass die Änderungen für die Besucher der Webseite sichtbar werden. Ist man mit der Anpassung der Extension fertig, entfernt man die If-Bedingung einfach wieder, so dass die Änderungen auch im Live-System sichtbar werden.

Aptana 3: FTP Sync und autoupload on save

Entwickler, die Projekte nicht lokal sondern online entwickeln möchten kennen das Problem: Man öffnet die PHP-Datei im FTP-Programm, dieses lädt die Datei runter und zeigt sie einem im eingestellten Editor ein. Nachdem man seine Änderungen an der Datei gespeichert hat wechselt man wieder zum FTP-Programm, und lädt die Datei erneut zum Server hoch.

Einfach geht dieser Arbeitsablauf dank der Software Aptana, die auf der Eclipse IDE aufsetzt. Aptana bietet eine FTP Sync Funktion und kann veränderte Dateien sofort automatisch im Hintergrund per FTP hochladen. Man kann also ganz normal mit dem Aptana Editor arbeiten und merkt dabei keinen Unterscheid zum Offline-Arbeiten, da der Sync automatisch und dezent im Hintergrund abläuft.

Aptana herunterladen und installieren

Um diese Funktion nutzen zu können, muss man natürlich erst Aptana Studio herunterladen und installieren. Für diesen Post verwende ich Aptana Studio 3.0.1 Microsoft Windows in der Standalone Version.

Optional: Farbeinstellungen anpassen

Nach der Installation verwendet der Aptana Editor in der Version 3 standardmäßig weiße Schrift auf schwarzem Hintergrund. Wen das nicht stört, der kann diesen Schritt überspringen. Wen es allerdings - so wie mich - sehr stört, der muss unter
Window -> Preferences -> Aptana -> Themes
den Theme "Aptana Studio 2.x" einstellen.

Projekt anlegen

Wie bei Eclipse muss man auch bei Aptana zunächst das Projekt anlegen, mit dem man arbeiten will, sofern man das noch nicht getan hat. Das kann man über File -> New -> PHP Project tun.

FTP-Verbindung eingeben und Autosync aktivieren

Nun der eigentliche Clou. Damit eben die automatische FTP-Synchronisation funktionieren kann, muss man zunächst eine FTP-Verbindung angeben und die Option für die automatische Synchronisation setzen. Diese Einstellungen sind dabei projektabhängig, d.h. man muss diesen Schritt für jedes Projekt wiederholen, für den man diese Funktion einsetzen möchte. Man kann natürlich auch für jedes Projekt eine andere FTP-Verbindung verwenden, was ja normalerweise auch nötig ist. Man kann diese Einstellungen mit dem so genannten "Web Deployment Wizard" vornehmen. Diesen findet man in der oberen Leiste des App Explorers.

Deployment Wizard starten

FTP auswählen

FTP Sync konfigurieren

1. Bezeichnung für FTP-Verbindung eingeben

2. FTP-Verbindungsdaten eingeben. Hier unbedingt darauf achten, dass der korrekte Pfad zum Projekt-Root angegeben ist!

3. Autosync aktivieren und konfigurieren. Die ausgewählte Option ist die in der Regel von mir verwendete, je nach Bedarf kann hier aber natürlich auch eine andere Option besser geeignet sein.


Danach sollte bei jeder gespeicherten Änderung die Datei automatisch auf dem Webserver aktualisiert werden. Viel Spaß und angenehmes Arbeiten, direkt online auf Ihrem Webserver!

TYPO3-Extension Bilder dynamisch verkleinern

Wer in einer TYPO3-Extension Bilder in einer bestimmten Auflösung anzeigen möchte, kann diese unter Verwendung von ImageMagick dynamisch runterrechnen lassen. Der entscheidende Vorteil gegenüber eine HTML/CSS-Skalierung liegt darin, dass die Dateigröße verringert wird und dadurch natürlich auch Ladezeit und Traffic reduziert werden.

$imgTSConfig = Array();
$imgTSConfig['file'] = 'uploads/bilder/1.jpg';
$imgTSConfig['file.']['maxW'] = 150;
$imgTSConfig['file.']['maxH'] = 150;

return $this->cObj->Image($imgTSConfig);

Dieses Snippet erzeugt aus der Quelldatei 'uploads/bilder/1.jpg' dynamisch ein auf 150x150 Pixel skaliertes Bild und gibt dieses aus. Diese Funktion lässt sich hervorragend z.B. für Thumbnails einsetzen, man hat so die Bilder nur in der Originalgröße auf dem Server liegen und kann daraus dynamisch Thumbnails erzeugen oder beliebige andere Formate.

TYPO3: Jeder Seite eigene CSS-Klasse (und ID) zuweisen

Habe heute ein kleines Snippet gefunden, das jeder Seite in einem TYPO-Projekt eine eigene ID und Klasse zuweist. So kann man leicht per CSS einzelne Seiten individuell stylen.

Typoscript:

page.bodyTagCObject = HTML
page.bodyTagCObject.value = <body id="uid{field:uid}" class="pid{field:pid}">
page.bodyTagCObject.value.insertData = 1

Jeder Body erhält damit eine Klasse mit der eigenen Seiten-ID und eine ID mit der ID des Parents.

Mit HTML5 beliebige Fonts verwenden

Die meisten Webdesigner kennen das Problem: Man möchte in seinem Webdesign andere Schriftarten als Arial, Verdana und Times New Roman einsetzen, doch konnte dies bislang nicht kompromisslos tun. Voraussetzung dafür war, dass der Besucher der Webseite die verwendete Schriftart auf seinem Rechner installiert hatte. In der Regel behalf man sich mit JavaScript-Lösungen wie Cufon und nahm dabei in Kauf, dass die Texte mit der individuellen Schriftart als Bilder generiert wurden.

Das Ganze geht dank CSS3 aber auch viel einfacher. Mittels @font-face lassen sich neue Schriftarten definieren und an der gewünschten Stelle dann mit font-family verwenden. Normalerweise würde ich jetzt den Quellcode posten und genau erklären, wie man eigene Schriftarten mit CSS3 einbinden kann. Dazu habe ich jedoch ein sehr schönes Tool gefunden, den so genannten Font-Face Generator, der Font-Dateien in viele andere Font-Formate konvertiert und einem auch gleich einen Beispielcode zum einbinden des Font generiert.

Der Font-Face Generator
Der Font-Face Generator macht einem das Leben hier wesentlich leichter. Man sucht sich einfach die gewünschte Font-Datei (z.B. im Internet, bitte auf die Lizenzbestimmungen achten!), lädt diese im Font-Face Generator hoch und lässt sich dann das @font-face Kit generieren. Darin enthalten ist das Font in verschiedenen Formaten (TTF, EOT, WOFF, SVG, SVGZ) und Beispiel-CSS und HTML-Code. Dank der verschiedenen Font-Formate erreicht man eine hohe Cross-Browser Funktionalität. Die so eingebundenen Fonts funktionieren in allen einigermaßen aktuellen Browsern (IE, Firefox, Chrome, Opera, Safari) und die Schriften werden nicht als Bilder, sondern wie jeder andere Text auch dargestellt. Man kann ihn sich also vorlesen lassen oder auch markieren und kopieren, was beides bei JavaScript-Lösungen wie Cufon nicht möglich ist.

TYPO3-Extension Datenbankzugriff

Um in einer TYPO3-Erweiterung auf die Datenbank zuzugreifen, sollte man das TYPO3_DB-Objekt benutzen. Das Objekt ist erreichbar über $GLOBALS['TYPO3_DB'] und man erhält darüber Zugriff auf viele verschiedene Funktionen für den MySQL-Datenbankzugriff. Auf der TYPO3-Seite findet man hierzu eine Klassenreferenz.

Um den Einstieg etwas zu erleichtern hier ein einfaches Beispiel für eine Datenbankabfrage in einer TYPO3-Extension:

$fields = "vorname, nachname";
$table = "tx_spenden";
$where = "spenderliste=1";
$spender = $GLOBALS['TYPO3_DB']->exec_SELECTgetRows($fields,$table,$where);

In dem Array sind dann die entsprechenden Daten enthalten und können z.B. in einer Liste wie folgt ausgegeben werden:

if(is_array($spender)) {
  foreach($spender AS $s) {
    echo '<p>'.$s['vorname'].' '.$s['nachname'].'</p>';
  }
}

Es gibt natürlich auch zahlreiche andere Datenbankzugriffs-Funktionen neben exec_SELECTgetRows, wie z.B. exec_INSERTquery, execUPDATEquery, execDELETEquery, usw. Für die Spezifikation dieser Funktionen genügt ein Blick in die entsprechende Klassenreferenz.

TYPO3-Extension Caching deaktivieren

Bei der Entwicklung eigener TYPO3-Extensions kann es sehr lästig sein, nach jeder Änderung den Cache zu leeren. Das Caching der Extension lässt sich zum Glück sehr schnell deaktivieren. Hierzu muss nur in der Datei ext_localconf.php im Hauptverzeichnis der TYPO3-Erweiterung bei dem Funktionsaufruf

t3lib_extMgm::addPItoST43($_EXTKEY, 'pi1/class.tx_beispielext_pi1.php', '_pi1', 'list_type', 1)

der letzte Parameter von "1" auf "0" geändert werden:

t3lib_extMgm::addPItoST43($_EXTKEY, 'pi1/class.tx_beispielext_pi1.php', '_pi1', 'list_type', 0)

Nach dieser Änderung muss man noch einmal den Cache leeren, damit sie auch wirksam wird. Danach werden alle Änderungen in der Extension sofort im Frontend sichtbar, ohne vorher den Cache leeren zu müssen.

TYPO3: sprechende URLs mit realurl

Für die Suchmaschinenoptimierung sind so genannte "sprechende URLs" von großer Bedeutung. Für TYPO3 gibt es hierfür die Erweiterung realurl, die URLs wie "index.php?id=4" z.B. in "kontakt.html" umwandelt.

Bildlich gesprochen bedeutet das:

wird zu

Ich möchte hier zeigen, wie man diese Erweiterung in einem TYPO3-System einsetzen kann.

TYPO3 Lightwindow: Ganze Seiten oder Inhaltselemente in Lightbox anzeigen

Die TYPO3 Erweiterung wt_lightwindow bietet die Möglichkeit, beliebige Inhaltselemente oder ganze Seiten in einer Lightbox darzustellen. Die verschiedenen Lightbox-Erweiterungen stellen diese Funktionalität ja meist nur für Grafiken zur Verfügung. Ich werde hier zeigen, wie sich wt_lightwindow in Verbindung mit powermail verwenden lässt. Damit lassen sich Kontaktformulare in einer Lightbox anzeigen, wie auf folgendem Screenshot dargestellt:

Kontaktformular in Lightbox mit Lightwindow und Powermail