Donnerstag, 26. Juli 2012

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)