Zeigen 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.
Header1 = IMAGE
Header1 {
wrap = <h2>|</h2>
file = GIFBUILDER
file {
XY = [10.w]+5,26
transparentColor = #ffffff
backColor = #ffffff
10 = TEXT
10.text.field = header
10.text.current = 1
10.fontSize = 18
10.offset = 0,20
10.fontFile = fileadmin/fonts/irgendeineSchrift.ttf
10.fontColor = #587BA9
10.niceText = 1
}
}
lib.stdheader.10.1 < Header1
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.10.file.5 = Schatten
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
.setCurrent.htmlSpecialChars = 0.htmlSpecialChars = -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.file.10.text.listNum = 1
20.file.5.text.listNum = 1
20.if.isTrue.listNum = 1
20.alttext.field >
30 < .20
30.file.10.text.listNum = 2
30.file.5.text.listNum = 2
30.if.isTrue.listNum = 2
40 < .20
40.file.10.text.listNum = 2
40.file.5.text.listNum = 2
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 = <h2 class="imageheader" style="background-image: url('|')">
10.file = GIFBUILDER
10.file {
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.current = 1
20.wrap = |</h2>
}
lib.stdheader.10.5 < tempHeader
Damit erhält man folgenden Output:
<h2 class="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.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>
}
}
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
Category:Typo3 -> TypoScript
Category:Typo3 -> GIFBUILDER