TYPO3: Mit Typoscript und dem Gifbuilder Bilder mit Wasserzeichen versehen

Ich möchte hier anhand einiger Code-Snippets kurz zeigen, wie man mit Typoscript Wasserzeichen in Bilder einbetten kann. Dazu wird der GIFBUILDER verwendet, welcher aus dem Bild und dem einzubettenden Text eine neue Grafik erzeugt. Diese Grafik wird gecached, sie muss also nicht bei jedem Seitenaufruf neu berechnet werden, sondern nur nachdem der Cache geleert wurde.

Das grundsätzliche Vorgehen ist es dabei, ein GIFBUILDER-Objekt zu erzeugen und diesem dann das eigentliche Bild sowie den Text, der darüber gelegt werden soll, hinzuzufügen.

Dieses Snippet zeigt eine mögliche Anwendung zur Einbettung eines Wasserzeichens in ein Bild:

10 = IMAGE  # IMAGE-Objekt erzeugen, das Bild wird dann direkt ausgegeben (mit  versehen)
10.file = GIFBUILDER
10.file {
  XY = 1280, 720        # Breite und Höhe des neu erzeugten Bildes
  backColor = #FFFFFF   # Hintergrundfarbe
  format = jpg
  quality = 100         # maximale Qualität (100%)
    
  # Das Bild einlesen
  10 = IMAGE
  10.file.import = uploads/media/
  10.file.import.data = levelmedia:-1, slide    # Holt das Bild aus dem Feld "Media" im Reiter "Ressourcen" in den Seiteneigenschaften
  10.file.import.listNum = 0
  10.file.width = 1280
  10.offset = 0, 0
  
  # Den Wasserzeichentext darüber legen
  20 = TEXT
  20 {
    text = © My Company     # Text des Wasserzeichens
    align = right           # richtet den Text am rechten Rand aus
    offset = -25, [10.h]-5  # 25 Pixel Abstand vom rechten Rand, 5 Pixel Abstand vom unteren Rand (10.h steht für die Höhe von dem an Position 10 eingefügten Bild)
    fontColor = #ffffff     # weiße Schriftfarbe
    fontSize = 8            # Schriftgröße
  }
}

Natürlich gibt es vielfältige Möglichkeiten der Konfiguration, eine Auswahl derer ich hier vorstellen möchte.

Breite und Höhe des neu zu erzeugenden Bildes

XY = 1280, 720        # fest definiert
XY = [10.w],[10.h]    # Breite und Höhe des Bildes an Position 10 übernehmen

# Es sind beliebige Kombinationen möglich:
XY = [10.w], 720            # Breite von Bild an Pos. 10, feste Höhe
XY = [10.w]-50, [10.h]+100  # 50px schmaler als Bild 10, 100px höher als Bild 10
# usw.

Benötigt man nur die URL zum neu erzeugten Bild und möchte nicht, dass dieses gleich mit <img>-Tags versehen wird, verwendet man statt IMAGE einfach IMG_RESOURCE.

10 = IMG_RESOURCE   # Nur die URL zum neu erzeugten Bild anzeigen
10.file = GIFBUILDER
# usw..... (siehe erstes Snippet oben)

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.