Image Replacement

  1. [globalVar = LIT:1 = {$replaceH1withImage}]
  2. lib.stdheader.10.1 >
  3. lib.stdheader.10 {
  4.   1 = IMG_RESOURCE
  5.   1 {
  6.     file = GIFBUILDER
  7.     file {
  8.       XY = [10.w]+10,[10.h]+10
  9.       backColor = {$backgroundColorH1}
  10.       format = png
  11.       10 = TEXT
  12.       10 {
  13.         text.field = header
  14.         fontSize = {$fontSizeH1}
  15.         fontFile = {$imageFontH1}
  16.         fontColor = {$imageColorH1}
  17.         offset = 0,{$fontSizeH1}
  18.         niceText = {$niceTextH1}
  19.       }
  20.     }
  21.     stdWrap {
  22.       prepend = TEXT
  23.       prepend {
  24.         dataWrap = <h1 class="G" style=
  25.       }
  26.       innerWrap.cObject = COA
  27.       innerWrap.cObject {
  28.         10 = TEXT
  29.         10.value = "background:url(|) no-repeat;">
  30.       }
  31.       append = TEXT
  32.       append {
  33.         current = 1
  34.         wrap = |</h1>
  35.       }
  36.     }
  37.   }
  38. }
  39. [global]

Erklärung des Codes

Zeile 2: Die Einstellungen für die Überschrift Layout 1 werden gelöscht und ab Zeile 3 neu definiert.

Zeile 10: Das Ausgabeformat der Grafik soll PNG sein.

Zeile 13 ff: Der Text wird aus dem Datenbankfeld header ausgelesen. Die Parameter (Größe, Font, Farbe, Offset, Hintergrundfarbe) werden durch Konstanten zugewiesen.

Zeile 21 ff: Der Grafik wird eine CSS-Klasse vorangestellt. Damit kann der Text ausgeblendet und das Hintergrundbild angezeigt werden.

Zeile 31 ff: Der eigentliche Text wird eingefügt. Diesen sehen nur Suchmaschinen. Benutzer mit grafischen Browsern sehen stattdessen die Grafik.

Der komplette TypoScript Code ist in einer Condition eingebettet, damit der Benutzer das Image-Replacement mit dem Constant-Editor ein- und ausschalten kann.