[paule]

Hi!

Für die Darstellung der H1-Titel nutze ich die Funktionen des GIFBuilder, um diese als Grafiken auszugeben. Das funktioniert soweit auch wunderbar und sieht mit nicetext auch toll aus ;D.

Mein Problem ist nun, dass keine Zeilenumbrüche berücksichtigt werden. Lässt sich irgendwie eine Art Maximalbreite für eine Titelgrafik definieren, nach der dann der Text umbrochen wird und eine entsprechend höhere Grafik erzeugt wird?

Danke für die Hilfe!


EDIT:
Da wir gerade bei der Formatierung sind: Habe festgestellt, dass er bei gerundeten Vokalen (also ä,ö,ü) einfach nur an der Stelle wo der Buchstabe sein sollte in der Grafik ein Rechteck mit einem Kreuz drin macht, so als ob das Zeichen in der Schrift nicht vorhanden wäre. Kann es sein, dass er mit OpenType-Schriften nicht richtig umgehen kann? Alle anderen Zeichen werden korrekt dargestellt. Ist es ein Konfigurations- oder Schriftfehler?

Auch hierfür gilt: Danke für die Antworten ;D.

[paule]

Hi!

Habe noch nach vielem Ausprobieren und längeren Sessions mit Google einige Informationen zusammengekratzt und daraus folgendes herausdestilliert ;D

Um mehrzeilige grafische Titel in Typo3 zu ermöglichen, kann man mittels einer einfachen Einstellung ein mehrzeiliges Eingabe-Feld für Titel im Typo3-Backend erzeugen lassen.
Dazu muss man in der Datei "extTables.php" diesen Eintrag ergänzen:

PHP-Code:

$GLOBALS['TCA']['tt_content']['columns']['header']['config']['type'] = 'text'; 


Die Datei "extTables.php" sollte sich im Ordner "typo3conf" befinden. Falls das nicht so ist, könnt ihr einfach eine anlegen, die nur die obige Zeile enthält. Zusätzlich müsst ihr in der "localconf.php" im gleichen Ordner nachsehen, ob die "extTables.php" eingebunden ist und ggf. folgende Zeile ergänzen, falls nicht vorhanden:

PHP-Code:

$typo_db_extTableDef_script = 'extTables.php'; 


Dadurch wird wie gesagt im Backend von Typo3 beim Anlegen von Inhaltselementen ein mehrzeiliges Eingabefeld für Titel angezeigt. Jeder mit der ENTER-Taste gesetzte Umbruch wird vom GIFBUILDER berücksichtigt.
Ihr müsst nur daran denken den umschließenden Tag groß genug zu machen bzw. im TypoScript die Grafik groß genug machen, damit auch alle Zeilen bzw. beide Zeilen (mehr sollten es bei Titeln wirklich nicht sein) draufpassen.

Damit das Ganze auch suchmaschinen- und screenreadertauglich wird, kann man sich der inzwischen ziemlich weit verbreiteten Image-Replacement-Techniken bedienen. In diesem Fall habe ich via TypoScript den Titel als Text umschlossen von "<strong>" in den H1-Tag eingefügt, was folgendermaßen funktioniert:

Typoscript-Code:

1: 2: 3: 4: 5: 6: 7: 8: 9: 10: 11: 12: 13: 14:

tempHeader = COA tempHeader { 10 = IMG_RESOURCE 10.stdWrap.wrap = <h1 style="background-image: url('|')"> 10.file = GIFBUILDER 10.file {      // Konfiguration von Schrift, Farben usw. } 20 = TEXT 20.current = 1 20.wrap = <strong>|</strong></h1> } lib.stdheader.10.1 < tempHeader

Nähere Erläuterungen und ein komplettes Beispiel gibts unter:
Überschriften als Bilder - Grafische Überschriften mit TYPO3 | mortox.de

Hoffe mal, dass ich damit dem ein oder anderen geholfen habe. Vielleicht könnte man ja auch mal alles mögliche zum Thema grafische Titel in einem Thread zusammenfassen.

P.S.: Das mit den fehlenden gerundeten Vokalen lag daran, dass das Schriftkonvertierungsprogramm, dass ich verwendet habe aus der OpenType-Schrift keine korrekte TrueType gemacht hat. Habe das mit einem anderen Programm lösen können.

[sissi]

Hi,

ich hatte das gleiche Problem und habs etwas anders geloest:

Typoscript-Code:

1: 2: 3: 4: 5: 6: 7: 8: 9: 10: 11: 12: 13: 14: 15: 16: 17: 18: 19: 20: 21: 22: 23: 24: 25: 26: 27: 28: 29: 30: 31: 32:

#Kein Wrap um Headerpix tt_content.textpic.20.text.10.10.stdWrap.dataWrap > #Header mit Image ersetzen lib.stdheader.10.1 = IMAGE lib.stdheader.10.1.alttext.field = header lib.stdheader.10.1 { file = GIFBUILDER file { XY = 220,[10.h]+[20.h]+2 transparentBackground = 1 10 = TEXT 10.text.current = 1 10.fontSize = 18 10.offset = 0,16 10.niceText = 1 10.fontFile = fileadmin/styles/mistress.ttf 10.text.listNum = 0 10.text.listNum.splitChar = |   20 < .10 20.text.listNum = 1 20.offset = 0,40 20.if.isTrue=1 30 < .10 40 < .20 } } lib.stdheader.stdWrap.dataWrap >

Wenn ich dann in der Ueberschrift eines Contentelements die Pipe reinschreibe macht Typo3 da einen Umbruch und macht das Gifbuilder-Bild entsprechend hoeher

Zu sehen hier: Galerie

Ein Beispiel ist: "Koelner Segelschule | Koelner Motoryachtschule"

Gruesse
Sissi

[paule]

Hi Sissi!

Ist auch eine schöne Lösung, bin aber mit TS nicht so vertraut, so dass ich mir da lieber Lösungen zusammenschuster ;D.

Finde bei deiner Lösung nur problematisch, dass man dann eventuellen Redakteuren (die in dem Fall wahrscheinlich gar nicht vorhanden sind außer dir) erst erklären muss, dass die das entsprechende Trennzeichen einfügen und einige Leute, die einen Computer nur als Kombination aus Outlook und Word kennen, kommen damit schon nicht klar, da ist so ein mehrzeiliges Eingabefeld schon praktisch ;).

P.S.: Jetzt haben mir doch die Finger gejuckt und ich hab ein bisschen mit den Schrifteinstellungen rumgespielt ^^