Kategorien
- [-]Developer (104)
- API (15)
- Backend (17)
- Extensions (29)
- HTML & CSS (4)
- Typoscript (33)
- [-]Redaktionelles (21)
- Anleitungen (9)
- Tipps (8)
- [-]Sonstiges (50)
- SEO (8)
Schlagwortwolke
« | August 2010 | » | ||||
---|---|---|---|---|---|---|
S | M | T | W | T | F | S |
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 |
Letzte Nachrichten
- DSGVO
- 26.05.2018 18:39
- Trackingtools und Datenschutzerklärung
- 14.03.2014 23:07
- 1:n und n:1 Relationen in Extbase
- 06.12.2013 12:04
- Erste Abmahnungen wegen Google Analytics
- 04.10.2013 12:11
Letzte Kommentare
- Das liegt daran, dass die captcha.php versucht, das halbe...
- 05.12.2017 00:41
- Hallo, danke für den tollen Beitrag. Kann man die...
- 22.10.2015 10:05
- Vielen Dank für den Austausch guter Artikel. Es ist eine...
- 17.08.2015 10:58
- Hallo Peter, danke für die Extension. Ich habe sie auf...
- 27.08.2014 12:51
In eigener Sache
Peter Linzenkirchner, Lisardo EDV Beratung in Augsburg. Freelance und Partner für Design- und Webagenturen in Augsburg und München. Pixelgenaue Templates, valides HTML, barrierearm. TYPO3-Projekte, Extension-Programmierung und mehr ...
Grafische Header
Ziel ist die Verwendung von Grafiken in den normalen Headern der Inhaltselemente bzw. als Ersatz derselben. Dazu gibt es mehrere Möglichkeiten in unterschiedlichem Schwierigkeitsgrad, dabei mehr oder weniger barrierefrei.
Alle vorgestellten Lösungen sind nicht vollständig barrierefrei, da keine einzige beim normalen Browserzoom (also dem Textzoom und nicht dem Ganzseitenzoom) nicht skalieren.
Headlines als Bilder ausgeben mit dem GIFBUILDER
Das ist sicher die einfachste Variante, die sich allerdings nur für einzeilige Headlines eignet. Bei mehrzeiligen Headlines (mit automatischem Umbruch) führt diese Technik zu abgeschnittenem Text, das kann aber mit einem Trick umgangen werden.
Quelle: Header aus Font rendern
Vorteile: einfach und simpel einzubauen. Wenn im Browser die Bilder ausgeschaltet sind, wird die Headline in der Standardschrift gezeigt (aus dem Alt-Attribut).
Nachteile: nur bedingt barrierefrei (Alt-Text wird vorgelesen, der Textfluss ist aber im Screenreader gestört – ich würde das Title-Attribut rauslassen, sonst wird der Text zweimal vorgelesen), ausserdem für SEO nicht ganz optimal. Nur bei einzeiligen Headlines möglich.
In den Kommentaren steht ein Beitrag von fips, mit dem jedes Wort der Headline eigens gerendert werden kann. So erfolgt der Zeilenumbruch wieder automatisch, da die Bilder einfach umbrechen (ungetestet):
- tempHeader=COA
- tempHeader {
- 10=IMAGE
- 10 {
- alttext.field=header
- file=GIFBUILDER
- file {
- XY=[10.w],26
- backColor=#ffffff
- transparentColor=#ffffff
- 10=TEXT
- 10 {
- text.field=header
- text.current=1
- text.listNum.splitChar=32
- text.listNum=0
- text.required=1
- text.noTrimWrap=|| |
- offset=0,20
- align=left
- #fontSize = {$header_fontsize}
- fontSize=20
- #fontFile = {$header_font}
- fontFile=fileadmin/fonts/titania-regular.ttf
- #fontColor = {$header_color}
- fontColor=#0e6400
- niceText=1
- doNotStripHTML=1
- }
- 5<.10
- 5 {
- fontColor=#c1c1c1
- offset=3,18
- }
- }
- if.isTrue.field=header
- if.isTrue.listNum=0
- if.isTrue.listNum.splitChar=32
- }
- 20<.10
- 20.if.isTrue.listNum=1
- 20.alttext.field>
- 30<.20
- 30.if.isTrue.listNum=2
- 40<.20
- 40.if.isTrue.listNum=2
- #...usw - so viele Wörter, die man max. benötigt
- }
Beide Methoden haben das Problem, dass Links um die Headlines nicht funktionieren; der entsprechende TypoScript-Code muss noch ergänzt werden. Siehe im Beispiel weiter unten zu den mehrzeiligen Headlines.
Einzeilige Headlines mit einer Image-Replacement Methode
Hier wird das Bild als Hintergrund des h2-Tags geladen und der eigentliche Text der Headline mit CSS versteckt. Diese Methode nennt sich »Image Replacement«. Bei mehrzeiligen Headlines (mit automatischem Umbruch) führt diese Technik ebenfalls wieder zu abgeschnittenem Text.
- tempHeader=COA
- tempHeader {
- 10=IMG_RESOURCE
- 10.stdWrap.wrap= <h2class="imageheader"style="background-image: url('|')">
- 10.file=GIFBUILDER
- 10=TEXT
- 10 {
- text= >
- fontSize=18
- offset=5,18
- fontColor=#26383D
- niceText=1
- }
- 20=TEXT
- 20 {
- text.current=1
- fontSize=18
- fontFile=fileadmin/fonts/Chalkboard.ttf
- offset=23,20
- fontColor=#CFA824
- niceText=1
- }
- XY=[10.w]+[20.w]+23,26
- transparentColor=#ffffff
- backColor=#ffffff
- }
- 20=TEXT
- 20.wrap= |</h2>
- }
- lib.stdheader.10.5<tempHeader
Damit erhält man folgenden Output:
- <h2class="imageheader"style="background-image: url('typo3temp/GB/xxx.gif')>
- Meine Headline
- </h2>
Damit die Sache auch ordentlich aussieht ist noch ein CSS-erforderlich:
- h2.imageheader {
- overflow:hidden;
- height:26px;
- text-indent:999em;
- white-space:nowrap;
- background-repeat:no-repeat;
- }
- h2.imageheader a {display:block;}
Quelle: Grafische Überschriften mit TYPO3
Vorteile: Semantisch korrekt und weitgehend barrierefrei (bis auf die Tatsache, dass auch hier die Grafik nicht skaliert bei einem Textzoom im Browser).
Nachteile: wie erwähnt nur bei einzeiligen Headlines möglich. Wird im Browser die Darstellung von Bildern deaktiviert bei gleichzeitig aktivem CSS, so ist keine Headline zu sehen, da kein Alt-Text zur Verfügung steht. Damit die Links auf den Headlines funktionieren, müssen sie zum Blockelement gemacht werden.
Auch in diesem Beispiel sind Links um die Headlines nicht berücksichtigt; das entsprechende TypoScript muss noch ergänzt werden, siehe unten.
Mehrzeilige Headlines mit Image-Replacement
Dazu ist es zuerst erforderlich, die extTables.php von Typo3 zu patchen:
- $TCA['tt_content']['columns']['header']['config']['type']='text';
Damit wird aus dem einzeiligen Text-Input ein Textfeld. Die Zeilenschaltungen werden dann mit Return einfach im Feld gesetzt.
- 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.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>
- }
- }
Weiter ist folgender CSS-Code erforderlich:
- 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;
- }
Quelle: jenses im Mittwaldforum: (etwas weiter unten im Thread » [HowTo] grafische Content Überschrift«)
Das Image-Replacement erfolgt hier über den span-Tag. Eventuell wäre es sinnvoll, diese Methode mit dem Image-Replacement des obigen Beispiels zu ergänzen, da dieses ohne zusätzliches Markup auskommt.
Vorteile: weitgehend barrierefrei, optimiert für Suchmaschinen, mehrzeilige Headlines möglich.
Nachteile: Typo3-Core-Code muss gepatcht werden; bei ausgeschalteten Bildern erscheint kein Alttext.
Weiterführende Links:
- Jens Meiert: Übersicht: Image-Replacement-Techniken
- Speziell die hier verwendete Methode: Phark-Methode
- Mittwald Forum: grafische Content Überschrift
- sk-typo3: Header aus Font rendern
Weiterführende Literatur:
Alexander Ebner & Patrick Schuster: Typo3 und TypoScript Kochbuch.
- Corporate Identity bei Überschriften, S. 457
- Grafiken mit mehrzeiligem Text, S. 458
- Dynamisches Logo im Web 2.0 Stil, S. 451
- Kommentare