--- title: "grafische Content Überschrift" url: "https://www.typo3.net/d/54125-grafische-content-ueberschrift" source: "typo3.net" tags: ["TYPO3","TypoScript","Bilder","Tipp"] created: "2006-11-28" last_reply: "2006-11-29" replies: 8 solved: false page: 1 pages: 1 lang: "de" --- # grafische Content Überschrift TYPO3 › TypoScript · 8 Antworten · gestartet 2006-11-28 ## Eröffnungsbeitrag **toyde** · 2006-11-28 · [Beitrag #1](https://www.typo3.net/d/54125-grafische-content-ueberschrift/1) *Stichworte: grafische Überschrift, Überschrift Contentelement, GIFBUILDER* Servus, Auf mehrfachen Wunsch stell ich hier die Informationen zu diesem Thema zusammen. Übertitel eines Contentelementes lassen sich nicht nur durch CSS gestalten, sondern über GIFBUILDER als Grafik ausgeben. So sind mehrere Varianten an Farben, Schriftarten, eingebetteten Grafiken möglich. Ressource von sk-typo3 » ```typoscript Header1 = IMAGE Header1 { wrap =

|

file = GIFBUILDER file { XY = [10.w]+5,26 transparentColor = #ffffff backColor = #ffffff 10 = TEXT 10.text.field = 10.text.current = 1 10.fontSize = 18 10.offset = 0,20 10.fontFile = fileadmin/fonts/LIBSA1.TTF 10.fontColor = #587BA9 10.niceText = 1 } } lib.stdheader.10.1 < Header1 ``` Anschauungsbeispiel mit einer handvoll Features in einem Frontend: > [Bild: img127.imagevenue.com/…/th_21833_scrn__122_545lo.jpg](http://img127.imagevenue.com/img.php?image=21833_scrn__122_545lo.jpg) Beispielcode, weitere Möglichkeiten, z.B. auf just2b.com » ```typoscript tt_content.header.20 > lib.stdheader.10.1 = IMAGE lib.stdheader.10.1 { alttext.field = header // subheader titleText.field = header // subheader wrap = |
file = GIFBUILDER file { XY = [10.w]+10 ,35 backColor = white 10 = TEXT 10 { text.field = header text.current = 1 fontSize = 18 offset = 10,18 fontFile = fileadmin/fonts/Dauphin.ttf fontColor = #0053A6 niceText = 1 } 20 = TEXT 20 { text.field = subheader text.case = upper fontSize = 11 fontColor = #999999 offset = 10,30 niceText = 0 } 50 = BOX 50 { dimensions = 2,2,4,31 color = #00B1CC } } } ``` Durch den Einsatz von *lib.stdheader.10...* und/oder die Nutzung von Überschriften je Spalte, kann man hier mehrere Optionen standardmässig oder dynamisch vergeben. Durch simples Ausprobieren der Snippets oder Studium u.A. des GIFBUILDER-Objekts in der TypoScript-Referenz beantwortet man sich schon eine Menge Fragen selbst. Hier zu posten ist nicht verboten - aber bitte erst nach eigener Anstrengung. Die Übersichtlichkeit wird's allen danken. grüsse ## Antworten ### [#2](https://www.typo3.net/d/54125-grafische-content-ueberschrift/2) · jenses · 2006-11-29 Und das nennt man dann Web2.0, wenn sich alle typo3.net-Moderatoren gegenseitig zitieren :-) Preisfrage: Wie bekommt man nun eine solche grafische Überschrift halbwegs barrierefrei ? Wie kann ich eine solche grafische Überschrift verlinken ? ### [#3](https://www.typo3.net/d/54125-grafische-content-ueberschrift/3) · just2b · 2006-11-29 Hallo jenses, Das hat vermutlich soviel mit Web 2.0 zu tun wie dass du plenkst. Aber gut, ich bleib mal bei den basics, geht hier ja um Überschriften ;) Kenn mich mit deinen Preisfragen grad nicht so wirklich aus, TsRef ist dir doch sicher auch bekannt, aber für alle die es wissen wollen: > Wie bekommt man nun eine solche grafische Überschrift halbwegs barrierefrei ? title- & alt-Tag sind gesetzt. Zweiterer wurde nachgereicht, hat gefehlt, will nicht schummeln. Mehr geht wohl nicht, vielleicht über sifr was basteln *oder* du nimmst statt cObj IMAGE eben cObj IMG_RESOURCE und bindest das Bild irgendwie in den h1-Tag ein > Wie kann ich eine solche grafische Überschrift verlinken ? Alle fix verlinken > typolink bzw imagelinkwrap, siehe link: Einzelne verlinken > einfach den Verweis im Backend beim Titel mit der Url/ID füllen antworten ok? lg georg ### [#4](https://www.typo3.net/d/54125-grafische-content-ueberschrift/4) · jenses · 2006-11-29 > **just2b schrieb:** > > oder du nimmst statt cObj IMAGE eben cObj IMG_RESOURCE und bindest das Bild irgendwie in den h1-Tag ein Da kommen wir der Sache schon näher. > **just2b schrieb:** > > Alle fix verlinken > typolink bzw imagelinkwrap, siehe link: > Soll das ein ernst gemeinter Vorschlag sein? Warum sollten alle Überschriften einer Seite auf ein gemeinsames Ziel verweisen? > **just2b schrieb:** > > Einzelne verlinken > einfach den Verweis im Backend beim Titel mit der Url/ID füllen Und wo wird in Eurem TS, bei im BE ausgefülltem Feld, der Link gesetzt ? Mit folgendem TS werden barrierefreie grafische, auf Wunsch verlinkte, Überschriften erzeugt. Diese können ein- oder mherzeilig sein, ohne daß dafür ein Trennzeichen (splitchar) notwendig wäre. Voraussetzung für die Mehrzeiligkeit ist folgender Eintrag in extTables.php: ```php $TCA['tt_content']['columns']['header']['config']['type'] = 'text'; ``` Das Überschrift-Feld wird dadurch zu einem Textfeld (statt des üblichen einzeiligen Eingabefeldes), Zeilenumbrüche werden durch ENTER erzeugt, der Gifbuilder berücksichtigt diese. ```typoscript lib.stdheader { stdWrap.dataWrap = 10 { 1 > } } lib.stdheader.10 { 1 = IMG_RESOURCE 1 { file = GIFBUILDER file { XY = [10.w]+10,[10.h]+6 backColor = #ffffff 10 = TEXT 10 { text.field = header fontSize = 32 fontFile = fileadmin/fonts/arial.ttf fontColor = ##454B45 offset = 0,30 } } stdWrap.innerWrap (

) stdWrap.outerWrap.cObject = COA stdWrap.outerWrap.cObject { 5 = LOAD_REGISTER 5.headerlines.cObject = TEXT 5.headerlines.cObject.data = field:header 5.headerlines.cObject.br = 1 5.headerlines.cObject.htmlSpecialChars = 1 5.headerlines.cObject.innerWrap = | 5.headerlines.cObject.innerWrap.typolink.parameter.field = header_link 10 = TEXT 10.value = | 10.dataWrap ( |{register:headerlines} ) } stdWrap.outerWrap.append = TEXT stdWrap.outerWrap.append.value =

} } ``` ```css h1 { position:relative; display:block; width:280px; margin-bottom:13px; } h1 span { display:block; margin-top:1px; width:1px; font-size:20px; line-height:22px; overflow:hidden; } h1 span span { display:block; width:1000px; } ``` (Erweitertes TS nach einer Vorlage aus dem "TYPO3 Kochbuch" des O´Reilly-Verlages, ein wirklich empfehlenswertes Buch.) Mit freundlichen Grüßen, jenses PS: Da es sich hier nicht um ein "korrektes Deutsch"-Forum handelt, spare ich mir Kommentare zu Deinen Fähigkeiten, Georg. ;-) ### [#5](https://www.typo3.net/d/54125-grafische-content-ueberschrift/5) · just2b · 2006-11-29 Guten morgen jenses, niemand hat den Anspruch auf die einzige Wahrheit erhoben und auch ein moderator-flag in der fe_users von typo3.net macht einen nicht klüger. Also danke für deinen Beitrag georg ### [#6](https://www.typo3.net/d/54125-grafische-content-ueberschrift/6) · steffenk · 2006-11-29 Hi jenses, Gute Idee mit dem Textfeld - nur mal als Frage, hat ein Kunde das schonmal verlangt ? Ich denke immer, das Überschriften kurz und knapp sein sollen. Der durchschnittliche Webuser liest ja nicht sondern "scant" die Seite nur, eine mehrzeilige Überschrift ist da schon hinderlich. Frage: ```typoscript 5.headerlines.cObject.innerWrap = | ``` Ist das ein Tippfehler oder hat es was mit dem doppelten span auf sich ? Was hat es mit dem LOAD_REGISTER-Objekt auf sich, wozu wird das hier benötigt ? ### [#7](https://www.typo3.net/d/54125-grafische-content-ueberschrift/7) · just2b · 2006-11-29 > **steffenk schrieb:** > > Ist das ein Tippfehler oder hat es was mit dem doppelten span auf sich ? schau dir mal das css an, dann wirds klarer. das h1 span span wird rausgeschoben und im h1 span kommt das image rein (oder umgekehrt) georg ### [#8](https://www.typo3.net/d/54125-grafische-content-ueberschrift/8) · jenses · 2006-11-29 Das h1 erhält als Hintergrundbild das Image, innerhalb der doppelten spans steht die Überschrift als Text. Bei aktiviertem Stylesheet wird das Bild angezeigt, bei abgeschaltetem Stylesheet die Überschrift als Text. > **steffenk schrieb:** > > Gute Idee mit dem Textfeld - nur mal als Frage, hat ein Kunde das schonmal verlangt ? > Ich denke immer, das Überschriften kurz und knapp sein sollen. Der durchschnittliche Webuser liest ja nicht sondern "scant" die Seite nur, eine mehrzeilige Überschrift ist da schon hinderlich. **Frage 1:** Ja, zweispaltige Überschriften im CI-Schriftschnitt werden sehr oft gewünscht, das umständliche Hantieren mit Trennzeichen dagegen nie :-) . **Meinungsäußerung 1:** Welche Belege hast Du für Deine Behauptung ? Stell Dir folgendes Beispiel vor: 3spaltiges Layout, Überschrift in rechter Spalte der Breite 182px: "Einführungsschulung in Espelkamp:". Soll ich das jetzt abkürzen zu "Einf.sch. i. Es.mp.",damit es in die Spalte paßt, oder darf ich eine zweizeilige Überschrift anwenden? > **steffenk schrieb:** > > Was hat es mit dem LOAD_REGISTER-Objekt auf sich, wozu wird das hier benötigt ? headerlines wird mit dem Text der Überschrift gefüllt, mit den doppelten spans und dem abschließenden h1-Tag gewrapped. ### [#9](https://www.typo3.net/d/54125-grafische-content-ueberschrift/9) · toyde · 2006-11-29 Wie eingangs erwähnt ist dies ein HowTo, eine Kurzanleitung die sich mit einem Teilgebiet beschäftigt. Da ich gerne eine gewisse Anzahl PM's unterbinden will, habe ich lediglich die Basisinformationen mit Beispielen hier niedergeschrieben. Hier geht's nicht um spezifische Kundenwünsche, sondern um eine Anlaufstelle für Wissenshungrige. Damit dieser Thread für diejenigen übersichtlich bleibt, die genau solche Snippets und Möglichkeiten suchen, ist der Thread geschlossen. grüsse Detaillierte Diskussion darf gerne weitergeführt werden. » [Diskussionsthread](https://www.typo3.net/d/54184-grafische-content-ueberschrift) --- Quelle: „grafische Content Überschrift“, typo3.net, https://www.typo3.net/d/54125-grafische-content-ueberschrift Beiträge von Mitgliedern des Forums. Bitte mit Link auf die Diskussion zitieren.