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

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 defaultwird 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!
Kommentieren Alle Blogposts

Kommentare

Hi,

ich teste das ganze gerade mit typo3 6.2. Nur leider verlinkt er einfach die Überschriften nicht, hat jemand eine Indee woran dies liegen könnte?

Bsp.:

#H2 (1)

1 = TEXT

1.field = header

1.wrap = |

# Verlinkung von Ueberschriften

1.typolink {

parameter.insertData = 1

parameter = {field:header_link}

}

Hallo.

Erstmal danke für diesen Beitrag, er ist wirklich hilfreich.

Frage: muss ich zu jedem Layout eine Link-Definition schreiben, oder ist eine Definition über alle möglich?

beim Standard-Layout sagten wir ja:

"default.typolink {

parameter.insertData = 1

parameter = {field:header_link}

}"

müsste ich also zum Layout 2 beispielsweise folgendes schreiben?:

"2 &lt; .default

2 = TEXT

2.field = header

2.wrap = |"

funktioniert zwar, aber ist eine Definition in einer Zeil möglich? thx

Sehr sehr hilfreich!

Gruß

- Johannes

Danke für diesen Beitrag! War sehr Hilfreich.

Hallo, ich beschäftige mich beruflich mit Typo3 und trotzdem lerne ich doch immer noch dazu. Wirklich gute Beschreibung und funktioniert auch. Werde mich mal über die anderen Typo3 Artikel stürzen. Danke nochmal. Michael

wie kann ich dem Link einer Überschrift eine eigene CSS-Klasse (<a> mitgeben?

Folgendes funktioniert leider nicht:

lib.stdheader.10.9 &lt; lib.stdheader.10.1

lib.stdheader.10.9.fontTag = |

lib.stdheader.10.9.typolink.ATagParams = class="iconRecommend"</a>

Wie kann ich denn einfach eine neue Überschriftendefinition hinzufügen ohne die bestehenden neu definieren zu müssen?

Habe bereits mittels:

TCEFORM.tt_content.header_layout.addItems.9 = Neues Layout

ein neues Layout angelegt dass auch angezeigt wird. Jedoch will ich dafür jetzt noch eine spezielle Formatierung vornehmen. In diesem Beispiel werden jedoch alle Definitionen neu angelegt.

Wie kann ich denn dennoch die Klasse csc-firstHeader in der allerersten Überschrift ausgeben? :/

#Überschriftlayouts

lib.stdheader = CASE

lib.stdheader {

key.field = header_layout

#Default/H1 (0)

default = TEXT

default.field = header

default.wrap = |

# Verlinkung

default.typolink {

parameter.insertData = 1

parameter = {field:header_link}

}

Da bekomm ich immer nur "Text", "Text", ... Brauche in der ersten Überschrift auf der seite (egal, welches Layout) diese Klasse... :/

Danke schonmal!

Gruß! Nicole

Mein Border Problem ist gelöst! War im CSS noch ein Fehler!

Nun was anderes: "Wie kann ich es schaffen das die Überschrift bis zum Ende des Content geht? (#GRAFISCHE UEBERSCHRIFT (2))" Oder den Hintergrund des Überschriftenfeldes mit der Hintergrundfarbe der formatierten Überschrift versehen. Wenn ich das im ObjectBrowser mache gilt dies für alle! Ich möchte aber für jede Überschrift einzeln wählen können.

Und wenn wir schon dabei sind, ich bekomme es nicht hin die Schrift Fett darzustellen.

Genial!!! Leider habe ich bei der grafischen Überschrift immer einen Rahmen um meine Überschrift. Obwohl ich Border = 0 drin habe! Nur bei der Überschrift, nicht bei normalen Bildern, hat jemend ne Lösung.

Hallo, vielen Dank für den Artikel - hier ein kleiner Nachtrag: nach dem Beispiel oben würde header_position nicht berücksichtigt werden, ich habe es etwas ergänzt so dass auch die Ausrichtung (links, rechts, mitte) zusammen mit den eigenen Layouts funktioniert:

# UEBERSCHFIRTEN ALTERNATIVE LAYOUTS

# ***********************************************

# Ueberschrift neu formatieren

lib.stdheader &gt;

lib.stdheader = COA

lib.stdheader{

# Create align style-attribute for tags

2 = LOAD_REGISTER

2.headerStyle.field = header_position

2.headerStyle.required = 1

2.headerStyle.noTrimWrap = | style="text-align:|;"|

}

lib.stdheader.10 = CASE

lib.stdheader.10 {

setCurrent {

field = header

htmlSpecialChars = 1

typolink.parameter.field = header_link

}

key.field = header_layout

# DEFAULT H1-AUSGABE (0)

default = TEXT

#default.field = header

default.current = 1

default.insertData = 1

default.wrap = |

# Verlinkung von Ueberschriften

default.typolink {

parameter.insertData = 1

parameter = {field:header_link}

}

#H2 ROT (1)

1 = TEXT

#1.field = header

1.current = 1

1.insertData = 1

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/Trebuchet MS Bold.ttf

10.fontColor = #b25800

10.fontSize = 13

10.offset = 0, 12

# ggf vorhandene zweite Textzeile

15 &lt; .10

15.text.listNum = 1

15.offset = 1, 38

# Hilfsebene fuer Hoehenberechnung

16 &lt; .10

16.text.case = upper

16.text.listNum = 1

16.fontSize = 12

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}

}

2.wrap = |

# CSS VERSTECKT (3)

3 = TEXT

3.field = header

3.wrap = |

# NICHT AUSGEBEN: (4)

4 = TEXT

4.field &gt;

} # ENDE lib.stdheader

Ich bekomme Probleme mit RealUrl da er die nun die Überschrift des ersten Textpic (=Sortenbeschreibung) als Postvar Variable sucht anstelle des Seitentitels (=Sorten).

Ansonsten funktioniert alles super.

k mein Fehler, muss natürlich in der TCconfig rein! Wer lesen kann...

Also bei mir TYPO3 4.2.10 wirken sich die Änderungen im Backend nicht aus (Menüeintrage umzubenennen)... Dennoch greifen die Änderungen im Frontend... Jemand ne Idee?

[...] TYPO3 &amp; &Uuml;berschriften: formatiert, grafisch, versteckt und wech [...]

Vielen Dank auch für dieses ergonomische Arbeitsbeispiel. Dadurch haben Redakteure wirklich mehr Sicherheit beim einpflegen von Inhalten. Das verkürzt die Produktionslinie zwar nur um Sekunden, an die gleiche Stelle tritt jedoch Kundenzufriedenheit.

Diese Pulldowns für Layout-Typen gibt es noch an verschiedene Stellen, bspw. Textfeld-Layout, Sitemap-Layout. Wo und wie werden diese bearbeitet?

Klasse. Funzt. Danke Tom. Bitte. :-)

@Tutorial / @DJ Volvic:

Also Frage 10 scheint von Interesse zu sein: Problem:

<strong>Wie erhalte ich einen sechsten Überschriften-Typ?</strong>

Per default gibt es die Werte 0 bis 5 sowie 100 für versteckt. Das wird in der Datei <em>sysext/cms/tbl_tt_content.php</em> definiert, genauer im Array <em>$TCA['tt_content']['columns']['header_layout']['config']</em> unter <em>items</em>. Aber egal, eigentlich. Denn da müsst Ihr nicht herumcoden.

Um diesen Array um ein weiteres Element zu erweitern muss man in der Datei <em><strong>typo3conf/extTables.php</strong></em> einen sechsten TCA-Eintrag hinzufügen. Das geht z. B. über

$TCA['tt_content']['columns']['header_layout']['config']['items'] = Array (

Array('LLL:EXT:lang/locallang_general.php:LGL.normal', '0'),

Array('LLL:EXT:cms/locallang_ttc.php:header_layout.I.1', '1'),

Array('LLL:EXT:cms/locallang_ttc.php:header_layout.I.2', '2'),

Array('LLL:EXT:cms/locallang_ttc.php:header_layout.I.3', '3'),

Array('LLL:EXT:cms/locallang_ttc.php:header_layout.I.4', '4'),

Array('LLL:EXT:cms/locallang_ttc.php:header_layout.I.5', '5'),

<strong>Array('Ueberschrift Sechs', '6'),</strong>

Array('LLL:EXT:cms/locallang_ttc.php:header_layout.I.6', '100')

);

Jetzt speichern, hochschieben und Ihr werdet einen neuen Überschriftentyp <em>Ueberschrift Sechs </em>finden.

Viel Spaß // tom

Zu Eintrag 10 von Tutorial würde mich auch eine Problemlösung interessieren...

Anybody?

Bei Typo3 4.2.2 läufts.

Problem:

Habe versucht mit:

6 = TEXT

6.field = header

6.wrap = |

eine weitere Überschrift zu definieren. Sie erscheint jedoch auch trotz:

## Layout Typen umbenennen

TCEFORM.tt_content.header_layout.altLabels {

1 = Grafisch mit Font

2 = Grafisch mit Font 2

3 = H3 140%

4 = H4 120%

5 = H5 100%

6 = H6 100% fett <strong>&lt;- die ist gemeint</strong>

}

## Layout Typen ausblenden

TCEFORM.tt_content.header_layout.removeItems = 7,8,9,10 &lt;- hier natürlich ohne 5 und 6

nicht in der Drop-Down-Liste im BE.

Gibt es noch soetwas wie:

TCEFORM.tt_content.header_layout.showItems ???

Jaja läuft. Wir haben schon ein paar Seiten upgedated, ohne das es etwas zerschossen hätte. //LG//tom

Hat das schon jemand mit Typo 4.2.3 getestet?

Bei mir funktioniert es nur halb d.H. im Backend wird nichts umbenannt aber im Frontend scheint es zu funktionieren

Ich bin noch neu bei Typo3 - wo finde ich bitte das TSConfig Feld? - Danke für Antworten

Hi!

Überschrift mit css verstecken findet Google nicht so lustig - von da her vorsicht mit so etwas...

Vielleicht funktioniert es bei einigen nicht, weil sie entweder das statische Temnplate "content(default)" nicht eingebunden haben oder die Extension css_styled_content nicht installiert und das entsprechende statische Template nicht eingebunden haben...

Anleitung:

www.fi-ausbilden.de/blog/2007/07/08/typoscript-eine-einfuhrung-teil-2

Also, wir haben es jetzt nochmal ausprobiert und in eine frisch aufgespielte TYPO3-Installation (4.1.6) ohne TemplaVoila genau den oben angegebenen Code eingefügt und es lief alles sauber.

Das einzige womit man ein wenig aufpassen muss, sind die Anführungszeichen bei class="rot" / class="hidden". Die können beim Copy+Paste seltsame Formen annehmen.

Ansonsten funktioniert das alles!

Viel Glück / thomas alboth

Funktioniert das eventuell nur mit TemplaVoila? Bei mir funktioniert das so jedenfalls auch nicht.

Hmmm, bei mir funktioniert das so nicht...

habe wie oben beschrieben zunächst das TSConfig angepasst und dann das Setup der Root Seite. Hab mich ausserdem auf 2 Stile beschränkt: default und hidden (css). Ich kann nun auch nur noch die beiden Stile auswählen, allerdings werden mir nun im FE immer zwei Überschriften angezeigt:

Im Quelltext sieht das Ganze jetzt so aus:

ÜberschriftÜberschrift

Woran kann das liegen??

@Rene:

Das TypoScript muss ins TypoScript > Setup-Feld und außerhalb des Page-Objektes.

Entschuldigung vorab, falls die Frage einigen blöd vorkommt (; Aber: Wo genau im Typoscript der root seite muss ich ich Anweisungen einfügen?

Due Umbenennung der Layout Typen klappt einwandfrei. Nur leider werden die Anweisungen nciht richtig umgesetzt ;(

habe das ganze jetzt im setup feld das root temlplates zwischen "seite = PAGE

seite{ [anweisungen] }" gesetzt..oder muss das außerhalbt von dem "PAGE" hin? Bin für jeden Tip dankbar! (;

Kommentar schreiben

* Diese Felder sind erforderlich