In TYPO3 lassen sich grafische Überschriften mit Hilfe des GIFBUILDERS ganz einfach erstellen. Der einzige Nachteil ist, dass diese grafischen Überschriften von Suchmaschinen nicht gelesen werden können. Hier ein paar Tipps, um die grafischen Überschriften etwas Suchmaschinen optimierter zu gestalten.

Im folgenden Snippet wird die grafische Überschrift als Hintergrund für den H1 Tag verwendet. Innerhalb des H1 Tags wird ein Span mit der Text Überschrift eingefügt, welcher über CSS ausgeblendet wird.

lib.stdheader >
lib.stdheader = CASE
lib.stdheader {
  1=IMG_RESOURCE
  1{
    stdWrap.dataWrap = <h1 style="background-image:url(|)"><span>{current:1}</span></h1>
    file = GIFBUILDER
    file {
      format=png
      XY = [10.w]+5,35
       
      backColor = #ffffff
      10 = TEXT
      10 {
        text.current = 1
        fontSize = 22
        offset = 0,20
        fontFile = fileadmin/fonts/AVENLTSL.TTF
        fontColor = #000000
        niceText = 1
      }
    }
    stdWrap.if.isTrue.field=header
  }
  2=TEXT
  2.current=1
  2.fontTag=<h2>|</h2>
  3=TEXT
  3.current=1
  3.fontTag=<h3>|</h3>
  4=TEXT
  4.current=1
  4.fontTag=<h4>|</h4>
  5=TEXT
  5.current=1
  5.fontTag=<h5>|</h5>
  setCurrent {
    field=header
    htmlSpecialChars=1
    typolink.parameter.field=header_link
  }
   
  key.field=header_layout
  key.ifEmpty=1
  key.ifEmpty.override.data=register:defaultHeaderType
}

Und hier noch das passende CSS:

Comments

Alex, 12-05-10 08:35:

---

Alternativ ist auch ein negativer text-indent möglich, dann müsste man auf den span-Tag verzichten können:

h1 {
text-indent: -5000px;
}

APHRODIZIA, 30-07-10 10:11:

---

Vielen Dank! Und kleiner Tipp:
Wenn Du ein &-Zeichen in der Überschrift hast, wird das als & in der Grafik ausgegeben. Wenn Du die Konvertierung ganz abschaltest, ist die Seite nicht mehr valide. Deswegen habe ich das hier eingebaut:

...
10 {
text.current = 1
text.HTMLparser = 1
text.HTMLparser.htmlSpecialChars = -1
fontSize = 22
...

Ich hab das ganze hier im Einsatz:
http://www.aphrodizia.com/de/

Kommentar hinzufügen

* - Pflichtfeld

Vorname: *
Nachname:
E-Mail:
Den Code eingeben:

*

Text: *