In TYPO3 gibt es die Möglichkeit, Überschriften von Seiteninhalten mit einem anderen “Typ” zu versehen. Damit kann man verschiedenen CSS-Klassen vergeben, grafische Überschriften (als Bilder) erzeugen, sie per CSS zu verstecken oder auch gar nicht erst auszugeben. Los geht’s!

In einer normalen TYPO3-Version gibt es die links zu sehenden Überschrifen-Layouts. Hier kann man auswählen was man will, es wird im Frontend immer eine <H1>Überschrift</h1> ausgegeben werden. Und auch verborgen hilft hier nicht. Aber zu irgendwas muss das Ganze ja gut sein. Doch dazu brauchen wir ein wenig TypoScript, ein bisschen CSS.

1: Layout-Typen umbenennen

Da ich die vorinstallieren Bezeichnungen nicht gerade aussägekräftig finde, bennene ich sie bei einer neuen TYPO3-Installation immer erst einmal um. Folgenden Code könnte man beispielsweise in die TSConfig der Root-Seite einfügen, um die Layout-Typen und so die umbenennen:

## Layout-Felder Ueberschriften umbenennen und Rest ausblenden
TCEFORM.tt_content.header_layout.altLabels {
1 = H2 rot
2 = Grafische Ueberschrift
3 = Versteckt (CSS)
4 = Nicht ausgeben
}
TCEFORM.tt_content.header_layout.removeItems = 5,6,7,8,9,10,100

Mit dem removeItems lassen sich die nicht benötigten felder ausblenden. Der Wert 100 entfernt übrigens das “Hidden/Versteckt/Verborgen“.

2: TypoScript anpassen

Nun müssen wir die Werte im TypoScript Setup der Root-Seite wieder entgegennehmen und damit die Frontend-Ausgabe anpassen. Dies geht wie folgt:

# UEBERSCHFIRTEN ALTERNATIVE LAYOUTS
# ***********************************************
# Ueberschrift neu formatieren
lib.stdheader >
lib.stdheader = CASE
lib.stdheader {
key.field = header_layout
# DEFAULT H1-AUSGABE (0)
default = TEXT
default.field = header
default.wrap = <h1>|</h1>
# Verlinkung von Ueberschriften
default.typolink {
parameter.insertData = 1
parameter = {field:header_link}
}
#H2 ROT (1)
1 = TEXT
1.field = header
1.wrap = <h2 style=”color: red;”>|</h2>
#GRAFISCHE UEBERSCHRIFT (2)
2 = IMAGE
2.file = GIFBUILDER
2.file {
XY = 1+[10.w], 24
backColor = #FFFFFF
10 = TEXT
10.text.field = header
10.text.listNum = 0
10.text.listNum.splitChar = |
10.fontFile = fileadmin/fonts/arial.ttf
10.fontColor = #000
10.fontSize = 13
10.offset = 0, 12
# ggf vorhandene zweite Textzeile
15 < .10
15.text.listNum = 1
15.offset = 1, 38
# Hilfsebene fuer Hoehenberechnung
16 < .10
16.text.case = upper
16.text.listNum = 1
16.fontSize = 22
16.offset = 1000,1000
wrap = |<br />
}
2.alttext.field = header
2.titletext.field = header
# Verlinkung von Ueberschriften
2.typolink {
parameter.insertData = 1
parameter = {field:header_link}
}
# CSS VERSTECKT (3)
3 = TEXT
3.field = header
3.wrap = <h1 class=”hidden”>|</h1>
# NICHT AUSGEBEN: WECH!!! (4)
4 = TEXT
4.field >
} # ENDE lib.stdheader

Mit der CASE-Abfrage zum Header-Layout fragen wir ab, welcher Layout-Typ gewählt wurde und passen entsprechend die Ausgabe im Frontend an. Per default wird die <h1>Überschrift</h1> ausgegeben.

Mit dem typolink aktiviert man die Verlinkung von Überschriften.

In den Varianten 1 (H2 ROT) und 3 (CSS VERSTECKT) wird einfach nur der Wrap um den Feldinhalt header angepasst und damit formatiert.

Bei der GRAFISCHEN UEBERSCHRIFT wird eine Überschrift mit dem GIFBUILDER erstellt und damit als Bild ausgegeben, was nützlich ist, wenn man z.B. eine Corporate-Design-Schriftart verwenden möchte.

Das ganze Spiel lässt sich nun nach Belieben noch ausdehnen. Aber das ist jetzt Eure Sache!

Meta-Daten

Autor: undkonsorten, Thomas Alboth
Tags+Kategorien: none + CMS, TYPO3, Tutorial