Suche
Teilen
startseite » forum

grafische Content Überschrift [Gelöst]

  • toyde toyde
    Jedi-General
    0 x
    1971 Beiträge
    0 Hilfreiche Beiträge
    28. 11. 2006, 15:05

    [i]Stichworte: grafische Überschrift, Überschrift Contentelement, GIFBUILDER[/i]

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

    Anschauungsbeispiel mit einer handvoll Features in einem Frontend:

    [URL=http://img127.imagevenue.com/img.php?image=21833_scrn__122_545lo.jpg][IMG]http://img127.imagevenue.com/loc545/th_21833_scrn__122_545lo.jpg[/IMG][/URL]

    Beispielcode, weitere Möglichkeiten, z.B. auf just2b.com
    » [url]http://www.just2b.com/mein-typo3/tipps-tricks/headervariationen.html[/url]
    [TS]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
    }
    }
    }[/TS]

    Durch den Einsatz von [i]lib.stdheader.10...[/i] 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

  • 1
  • jenses jenses
    Flash Gordon
    0 x
    3087 Beiträge
    106 Hilfreiche Beiträge
    29. 11. 2006, 00:36

    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 ?

  • just2b just2b
    TYPO3-Yoda
    0 x
    18741 Beiträge
    2 Hilfreiche Beiträge
    29. 11. 2006, 00:48

    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 [i]oder[/i] 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: http://typo3.org/documentation/document-library/references/doc_core_tsref/current/view/8/6/

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

    antworten ok?

    lg georg

  • jenses jenses
    Flash Gordon
    0 x
    3087 Beiträge
    106 Hilfreiche Beiträge
    29. 11. 2006, 10:43

    [quote="just2b"]
    oder du nimmst statt cObj IMAGE eben cObj IMG_RESOURCE und bindest das Bild irgendwie in den h1-Tag ein
    [/quote]
    Da kommen wir der Sache schon näher.
    [quote="just2b"]
    Alle fix verlinken > typolink bzw imagelinkwrap, siehe link:
    http://typo3.org/documentation/document-library/references/doc_core_tsref/current/view/8/6/
    [/quote]
    Soll das ein ernst gemeinter Vorschlag sein?
    Warum sollten alle Überschriften einer Seite auf ein gemeinsames Ziel verweisen?
    [quote="just2b"]
    Einzelne verlinken > einfach den Verweis im Backend beim Titel mit der Url/ID füllen[/quote]
    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:

    1. $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.
    [TS]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>
    }
    } [/TS]

    1. h1 {
    2. 	position:relative;
    3. 	display:block;
    4. 	width:280px;
    5. 	margin-bottom:13px;
    6. }
    7.  
    8. h1 span {
    9. 	display:block;
    10. 	margin-top:1px;
    11. 	width:1px;
    12. 	font-size:20px;
    13. 	line-height:22px;
    14. 	overflow:hidden;
    15. }
    16.  
    17. h1 span span {
    18. 	display:block;
    19. 	width:1000px;
    20. }

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

  • just2b just2b
    TYPO3-Yoda
    0 x
    18741 Beiträge
    2 Hilfreiche Beiträge
    29. 11. 2006, 10:53

    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

  • steffenk steffenk
    Obi-Wan Kenobi
    0 x
    4666 Beiträge
    0 Hilfreiche Beiträge
    29. 11. 2006, 10:57

    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:
    [TS]5.headerlines.cObject.innerWrap = <span><span>|</span></span>[/TS]
    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 ?

  • just2b just2b
    TYPO3-Yoda
    0 x
    18741 Beiträge
    2 Hilfreiche Beiträge
    29. 11. 2006, 11:02

    [quote="steffenk"]
    Ist das ein Tippfehler oder hat es was mit dem doppelten span auf sich ?[/quote]
    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

  • jenses jenses
    Flash Gordon
    0 x
    3087 Beiträge
    106 Hilfreiche Beiträge
    29. 11. 2006, 13:56

    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.

    [quote="steffenk"]
    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.
    [/quote]
    [b]Frage 1:[/b] Ja, zweispaltige Überschriften im CI-Schriftschnitt werden sehr oft gewünscht,
    das umständliche Hantieren mit Trennzeichen dagegen nie :-) .

    [b]Meinungsäußerung 1:[/b] 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?

    [quote="steffenk"]
    Was hat es mit dem LOAD_REGISTER-Objekt auf sich, wozu wird das hier benötigt ?
    [/quote]
    headerlines wird mit dem Text der Überschrift gefüllt, mit den doppelten spans und dem abschließenden h1-Tag gewrapped.

  • toyde toyde
    Jedi-General
    0 x
    1971 Beiträge
    0 Hilfreiche Beiträge
    29. 11. 2006, 14:19

    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.
    » [url=http://www.typo3.net/forum/list/list_post//54184/]Diskussionsthread[/url]

  • 1
Präsentiert von