TYPO3 & Überschriften: formatiert, grafisch, versteckt und wech

17. Januar 2008 | 29 Kommentare

TYPO3 Tutorials by undkonsorten BerlinIn 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!

TYPO3: Überschrift Layout Normal/StandardIn 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

TYPO3: Überschrift Layout angepasstDa 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 = 
|
;
	# Verlinkung von Ueberschriften
	default.typolink {
		parameter.insertData = 1
		parameter = {field:header_link}
	}

	#H2 ROT (1)
	1 = TEXT
	1.field = header
	1.wrap = 
|
;

	#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 = |

	}
	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 = 
|
;

	# 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!

Ähnliche Artikel:

Meta-Daten

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



29 Kommentare

Auch mal Kommentieren:

Kommentar