Grafische Überschriften mit TYPO3
Eine besondere Stärke von TYPO3 ist der GIFBUILDER. Dieser ermöglicht es unkompliziert dynamische Grafiken zu erzeugen und ist somit ein optimales Werkzeug wenn es um das erzeugen von grafischen Überschriften geht. Wie alle Content-Objekte lässt sich auch der GIFBUILDER hinreichend über TypoScript konfigurieren.
Es gibt viele Tutorials zu dem Thema TYPO3 und grafische Überschriften aber ich habe bis jetzt noch keines gefunden, das bei diesem Thema auch Barrierefreiheit und Suchmaschinenoptimierung berücksichtigt. Meist wird einfach nur ein Beispiel gezeigt, in dem die Überschrift durch ein einfaches Bild ersetzt wird. Folge ist, dass weder Google noch Screenreader daraus schlau werden, was sich nun eigentlich hinter dem ominösen Headerbild versteckt.
Deshalb hab ich hier ein kleines TypoScript-Snippet für euch, das diese erwähnten Nachtteile aus dem Weg räumt aber optisch genau so gut aussieht:
tempHeader = COA
tempHeader {
10 = IMG_RESOURCE
10.stdWrap.wrap = <h2 class="imageheader" style="background-image: url('|')">
10.file = GIFBUILDER
10.file {
10 = TEXT
10 {
text = >
fontSize = 18
offset = 5,18
fontColor = #26383D
niceText = 1
}
20 = TEXT
20 {
text.current = 1
fontSize = 18
fontFile = fileadmin/fonts/Chalkboard.ttf
offset = 23,20
fontColor = #CFA824
niceText = 1
}
XY = [10.w]+[20.w]+23,26
transparentColor = #ffffff
backColor = #ffffff
}
20 = TEXT
20.current = 1
20.wrap = <strong>|</strong></h2>
}
lib.stdheader.10.5 < tempHeader
Erklärung
Es wird ein temporäres Objekt vom Typ COA (Content Object Array) namens tempHeader angelegt das aus zwei Teilen besteht: Zum einen das Überschriftbild, welches dann auch letztendlich sichtbar ist, und zum anderen der Überschriften-Text. Der GIFBUILDER selbst beinhaltet zwei Textobjekte die nach herzenslust angepasst werden können - hier kann z.B. eine eigene Schriftart angegeben werden oder Farben ausgetauscht werden. Alles wissenswerte zum GIFBUILDER gibts hier.
Die Zeile lib.stdheader.10.5 < tempHeader kopiert den Inhalt unseres temporären Objekts in den Standardheader. In diesem Beispiel ist das der Überschriften Typ Layout 5 - lib.stdheader.10.1 wäre dann z.B. der Typ Normal.
- TYPO3 Standardüberschrift als Bild
Letztendlich beinhaltet der komplette tempHeader also einen HTML-Code der im Frontend so ausgegeben wird:
HTML:
<h2 class="imageheader" style="background-image: url('typo3temp/GB/xxx.gif')>
<strong>Eine tolle grafische Überschrift</strong>
</h2>
Aus Sicht der Suchmaschinen also ein wunderbarer HTML-Code da das Bild als Hintergrund für die Überschrift verwendet und diese nicht durch einen image-Tag ersetzt.
Das Ergebnis dürfte bereits so aussehen:
Eine noch nicht so tolle grafische Überschrift
Was jetzt noch gemacht werden muss ist lediglich das Stylesheet anzupassen. Erstens muss die Überschrift genau so hoch sein wie das Hintergrundbild und zweitens müssen wir den Text ausblenden, da dieser dann sonst unser schönes Bild verdeckt. Für mein Beispiel haben folgende Codezeilen ausgereicht:
CSS-Code:
h2.imageheader {
height:26px;
background-repeat:no-repeat;
padding: 0;
margin: 0;
}
h2.imageheader strong{
display:none;
}
Auch hier muss natürlich jeder seine eigenen Einstellungen finden.
Nun sollten wir eine wirklich supertolle Überschrift haben die sowohl technisch als auch optisch prima hinhaut:
Eine tolle grafische Überschrift
Update: Barrierefrei die Zweite!
Michael Bakonyi hat mich kontaktiert und mir eine weitere - sehr clevere - Variante mitgeteilt die den HTML-Code noch kompakter und barrierefreier macht. Der CSS-Code dafür sieht wie folgt aus:
CSS:
h2.imageheader {
overflow: hidden;
height: 26px;
text-indent: 999em;
white-space: nowrap;
background-repeat: no-repeat;
}
Erklärung:
Bei dieser Variante wird der strong-Tag nicht mehr benötigt. Der betroffene Teil in der Zeile
20.wrap = <strong>|</strong></h2>
kann also getrost aus dem TypoScript entfernt werden (wird also zu 20.wrap = |</h2>). Der Trick ist, dass der Überschrifttext durch das text-indent weit über seine Blockgröße hinaus geschoben wird und dann quasi abgeschnitten wird (overflow: hidden). Dadurch ist der Text unsichtbar, ohne den strong-tag erst ausblenden zu müssen. Da screenreader laut Michael einen ausgeblendeten tag nicht vorlesen, liegt der Vorteil dieser Variante auf der Hand! Danke für diesen Tipp!
Teilweise falsch dargestellt Umlaute beruhen übrigens auf einen Fehler in der Bildbearbeitungslibrary von TYPO3. Ich habe mich selbst zwar nicht damit beschäftigt, aber es gibt anscheinend mehrere Extensions, die eine korrekte Ausgabe der UTF-8 Zeichen erzwingen. Das hat Kai Hirdt herausgefunden - danke dafür.
