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.

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.

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