grafische Content Überschrift

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
» http://www.sk-typo3.de/Header-aus-Font-rendern.60.0.html

Header1 = IMAGE
Header1 {
  wrap = <h2>|</h2>
  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

Beispielcode, weitere Möglichkeiten, z.B. auf just2b.com
» http://www.just2b.com/mein-typo3/tipps-tricks/headervariationen.html

tt_content.header.20 > 

lib.stdheader.10.1 = IMAGE
lib.stdheader.10.1 {
  alttext.field = header // subheader
  titleText.field = header // subheader
  wrap = |<br />
  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

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 ?

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: https://docs.typo3.org/m/typo3/reference-typoscript/main/en-us/ContentObjects/Image/Index.html

Einzelne verlinken > einfach den Verweis im Backend beim Titel mit der Url/ID füllen

antworten ok?

lg georg

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:
https://docs.typo3.org/m/typo3/reference-typoscript/main/en-us/ContentObjects/Image/Index.html

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:

$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.

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 (
<h1 style="background: url({$baseUrl}|) no-repeat;">
)
		
		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 = <span><span>|</span></span>
			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 = </h1>                 
	}
}

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. ;-)

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

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:

5.headerlines.cObject.innerWrap = <span><span>|</span></span>

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 ?

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

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.

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