Mit grafischen Überschriften arbeiten

Standardmäßig bietet dieses Template die Möglichkeit, jeden Typ einer Überschrift (Layout 1 bis Layout 5) durch Grafiken zu ersetzen. Farbe, Schriftgröße und Hintergrundfarbe können dabei komfortabel im Constant Editor festgelegt werden, selbstverständlich für jeden <Hx> Tag separat. Und zwar ohne den Nachteil, dass Suchmaschinen nun keinen lesebaren Inhalt mehr vorfinden, sondern lediglich eine Grafik. Das Image Replacement nach der sogenannten Phark-Methode macht das möglich.

Wenn Sie das einmal mit einer Überschrift versucht haben, kommen Sie vielleicht zu dem Schluss, dass Sie die Überschriften anders gestalten möchten. Kein Problem, der GIFBUILDER kann noch mehr:

  1. [globalVar = LIT:1 = {$replaceH5withImage}]
  2. lib.stdheader.10.5 >
  3. lib.stdheader.10.5 = IMG_RESOURCE
  4. lib.stdheader.10.5 {
  5.   file = GIFBUILDER
  6.   file {
  7.     XY = [80.w]+65,65
  8.     10 = TEXT
  9.     10 {
  10.       text = l
  11.       fontFile = fileadmin/fonts/symbole.ttf
  12.       fontSize = 60
  13.       fontColor = #bbddbb
  14.       offset = 6,54
  15.     }
  16.     20 = BOX
  17.     20 {
  18.       dimensions = 30,11,[80.w],45
  19.       color = #333333
  20.     }
  21.     30 < .10
  22.     30 {
  23.       offset = [80.w]+8,54
  24.     }
  25.     40 = EFFECT
  26.     40 {
  27.       value = blur=90
  28.     }
  29.     50 < .10
  30.     50 {
  31.       fontSize = 62
  32.       fontColor = #bbddbb
  33.       offset = 10,49
  34.     }
  35.     60 = BOX
  36.     60 {
  37.       dimensions = 36,5,[80.w],45
  38.       color = #bbddbb
  39.     }
  40.     70 < .50
  41.     70 {
  42.       offset = [80.w]+10,49
  43.     }
  44.     80 = TEXT
  45.     80 {
  46.       text.field = header
  47.       fontFile = fileadmin/fonts/Share-Regular.ttf
  48.       fontSize = 34
  49.       fontColor = #222222
  50.       offset = 36,38
  51.     }
  52.     90 = SCALE
  53.     90 {
  54.       width = [80.w]/2+32
  55.       height = 32
  56.     }
  57.   }
  58.   stdWrap {
  59.     prepend = TEXT
  60.     prepend {
  61.       dataWrap = <h5 class="G" style=
  62.     }
  63.     innerWrap.cObject = COA
  64.     innerWrap.cObject {
  65.       10 = TEXT
  66.       10.value = "background:url(|) no-repeat;">
  67.     }
  68.     append = TEXT
  69.     append {
  70.       current = 1
  71.       wrap = |</h5>
  72.     }
  73.   }
  74. }
  75. [global]

Hinweis: Der TypoScript-Code stammt aus dem TYPO3 Kochbuch (ISBN 3-89721-430-X), dass sich jeder TYPO3-Entwickler zulegen sollte. Ich habe den Code geringfügig modifiziert, so dass Sie ihn in Verbindung mit diesem Template sofort verwenden können.

Erläuterungen (Code bitte in Ihr lokales TS-Setup einfügen):

  • Zunächst kapseln Sie den gesamten TypoScript-Code in einer Condition, damit das Abschalten der grafischen Headlines mit dem Constant-Editor weiterhin funktioniert (Zeile 1 und 75).
  • Der GIFBUILDER kann keine Rundungen erzeugen, deshalb wenden Sie einen Trick an: Sie verwenden eine Symbol-Schrift (z.B. Zapf Dingbats), bei der ein gefüllter Kreis im Zeichensatz enthalten ist (Zeile 11). Dieser Kreis liegt unter dem kleinen Buchstaben "L" (Zeile 10). Die gesetzte Schriftgröße ergibt die linke Rundung.
  • Zeile 21 kopiert das Ganze und der Offset in Zeile 23 schiebt es nach rechts und erzeugt somit die rechte Rundung. (Aus lizenzrechtlichen Gründen kann ich den TrueType-Font Zapf Dingbats leider nicht mit den Downloadpaketen ausliefern, Sie müssen sich diesen also entweder besorgen oder einen äquivalenten Symbol-Font verwenden.)
  • Zeile 46 holt den Text für die Überschrift aus der Datenbank und Zeile 47 bestimmt die Schrift, die dafür verwendet wird. Da es sich dabei um eine lizenzfreie Schrift handelt, finden Sie diese im Verzeichnis fileadmin/fonts.
  • Zeile 61 und Zeile 66 übernehmen das Erzeugen des notwendigen HTML-Tags um die dynamisch erzeugte Grafik als Hintergundbild für diesen in einen Inline CSS-Style einzubinden.

Sie können (und sollen) das gezeigte Beispiel natürlich anpassen und die Farben und das Aussehen ändern. Wie Sie sehen sind die Möglichkeiten, mit dem GIFBUILDER Grafiken zu erzeugen, fast unbegrenzt.

Statt lib.stdheader.10.5 (ändert das Aussehen eine Überschrift vom Typ Layout 5) können Sie ebenso jeden anderen Layout-Typ ändern. Zum Beispiel wäre das bei Typ Layout 3 dann lib.stdheader.10.3