Dieser Artikel berücksichtigt keinen CSS3 Font-Upload, Google-Fonts etc..

Das Original ist von 2009, heute (2013) würde ich es nicht mehr so machen.


Werbung


Manchmal reichen die Schriften einfach nicht aus, die man im Web für die Gestaltung sicher verwenden kann – spätestens wenn eine seltene Schriftart verwendet werden soll, kann man sicher sein, daß diesen Font niemand hat.

TYPO3 verfügt über den GIFBUILDER, einem Modul das unter Verwendung von Imagemagic und/oder GDLib direkt auf dem Server allerhand Grafiken erzeugen kann. Meist kommt Imagemagic bei Bildpräsentation zur Geltung, weil es im TYPO3 für das Skalieren von Bildern verwendet wird. GDLib kann aber auch mit Truetype-Fonts umgehen, wenn es richtig installiert ist. Das zu konfigurieren und überprüfen ist Teil des Installationsprozesses.

Wenn das korrekt installiert ist, kann man im Prinzip alle Inhalte als Gif ausliefern. „Templates for Templavoila“ hat bereits eine Erweiterung an Board, mit der Überschriften „automatisch“ gleich als Grafik ausgeliefert werden können, und die Headergrafiken greifen auch schon auf den GIFBUILDER zurück. Diese Funktion ist extrem wichtig, wenn bestimmte Schriften Teil eines CI sind. Aber auch bei CSC basierenden Seiten ist das kein Problem.

Im folgenden Beispiel soll der Truetype-Font „Mariah Regular“ verwendet werden, und es soll der Titel der Seite und der Untertitel im sichtbaren Kopfbereich jeder Seite in dieser Schrift zu sehen sein.

 

Das Typo-Script sieht so aus:

##################################################
# GIFGRAFIK definition
##################################################
#
temp.gtitle = IMAGE
temp.gtitle.file = GIFBUILDER
temp.gtitle.file {
XY = 700, 84
backColor = #BAD1E4
10 = TEXT
10.text.field = title
10.fontSize = 46
10.fontFile = fileadmin/MariahRegular.ttf
10.fontColor = #083E66
10.offset = 0,42
10.maxWidth=690
transparentBackground = 1
20 = TEXT
20.text.field = subtitle
20.fontSize = 26
20.fontFile = fileadmin/MariahRegular.ttf
20.fontColor = #083E66
20.offset = 5,76
20.maxWidth=690
}

Kurze Benennung der einzelnen Variablen die verwendet wurden.

  • XY
    • Bildgröße in Pixeln, Breite/höhe
  • backColor
    • Hintergrundfarbe
  • text.field = title
    • die Variable „title“ von TYPO3 zu der Seite
  • fontSize
    • Schriftgröße
  • fontFile
    • Dateiname des Truetype-Fonts
  • fontColor
    • Schriftfarbe
  • offset
    • Einrückung (links, oben).
  • maxWidth
    • Maximale breite die der Text einnehmen darf
  • transparentBackground
    • Hintergrund auf Transparent setzen

Da nicht jeder Font an der gleichen Stelle anfängt und die Laufweiten Variieren können muss man beim Offset und der Max-Width etwas rumprobieren bis es passt. Auch darf man Ober- und Unterlängen der Schriften nicht unterschätzen (meist großes „Ä“ und kleines „j“).

Im Beispiel verwenden wir 2 Zeilen, daher kommt einmal 10. … und einmal 20. … vor, die Unterschiede sind im verwendeten Feld, dem Offset und der Größe. Beide Zeilen sind auf dem selben Bild. Im YAML / TTV muss man übrigens als Variable für den Untertitel „page:subtitle“ verwenden – zum Testen ist statischer Text einfacher.

Der Gifbuilder kann noch viel mehr – auch mit Schriften. Ich hab damit auch schon Embossing- und Blur-Effekte für „leuchtende“ Schrift benutzt – man kann auch nur den Schatten einer Schrift verwenden. Dazu sollte man dann aber das Referenzhandbuch bemühen.


Werbung


Update 2010

In neueren TYPO3-Installationen funktioniert das oben geschriebene nicht mehr, da die getText Funktion im T3Core umgebaut wurde.

Um einen Titel nun zuzuweisen benötigt man folgende Zeile:

10.text.data = leveltitle : -1, slide

Mehr Infos unter wiki.typo3.org/wiki/TSref/getText (engl.)


Werbung