Grafische Überschriften mit TYPO3

TYPO3Mit TYPO3 können mittels des TypoScript-Objektes GIFBUILDER sehr komfortabel grafische Überschriften für Inhaltselemente erzeugt werden. Damit können auch Layouts mit exotischeren Schriftarten bedient werden.

Damit diese Bildüberschriften auch Suchmaschinen und Screenreader zufriedenstellen, bedarf es allerdings ein paar kleiner Kniffe, um z.B. ein alt-Attribut im img-Tag und/oder ein unsichtbaren Text-Tag in die Überschrift zu packen.

Das folgende Snippet zeigt, wie so etwas realisierbar ist:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
tmp.stdHeader = COA
tmp.stdHeader {
  #
  # wrap in h1-Tag
  #
  wrap = <h1>|</h1>
  #
  # Erzeugen des Bildes (ohne img-Tag)
  #
  10 = IMG_RESOURCE
  10.file = GIFBUILDER
  10.file {
    XY = [10.w]+10,[10.h]+10
    transparentColor = #ffffff
    backColor = #ffffff
    10 = TEXT
    10 {
      text.current = 1
      # HTML-Entities zurückwandeln
      text.HTMLparser = 1
      text.HTMLparser.htmlSpecialChars = -1
      fontSize = 32
      offset = 0,37
      fontColor = #000000
      niceText = 1
      fontFile = fileadmin/templates/fonts/MeinLieblingsFont.ttf
    }
  }
  #
  # wrap img-Tag
  #
  10.stdWrap.wrap = <img src="|" alt="" />
  #
  # Erzeugen eines Text-Tags mit Inhalt
  #
  30 = TEXT
  30.current = 1
  30.wrap = <!!=:>|</span>
}
#
# Überschreiben des default-stdHeaders aus css_styled_content
#
lib.stdheader.10.1 < tmp.stdHeader

Weitere Überschriften können analog behandelt werden. Dzu einfach die weiteren Layouts aus stdHeader überschreiben:

1
2
3
4
lib.stdheader.10.2 < tmp.stdHeader
lib.stdheader.10.3 < tmp.stdHeader
lib.stdheader.10.4 < tmp.stdHeader
# ...

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.