Grafische Überschrift

Armin Bartsch, Sonntag, 12. April 2009

Mit Image-Replacement-Techniken eine Suchmaschinenfreundliche und Barrierefreie grafische Überschrift einbinden

# Kopieren von lib.stdheader auf ein temp Object, dient zur Zwischenspeicherung temp.stdheader < lib.stdheader # Löschen von lib.stdheader lib.stdheader > lib.stdheader = CASE lib.stdheader { # Abfrage der Spalte key.field=colPos # Default Wert, wird ausgeführt wenn keine gesonderte Konfiguration für colPos vorhanden ist default < temp.stdheader # Für die mittlere Spalte, mittlere Spalte ist colPos 0 # Erst wird temp.stdheader kopiert 0 < temp.stdheader # Jetzt wird die Grafikkonfofiguration kopiert 0.10.1 < temp.header_grafik }
  1. # Kopieren von lib.stdheader auf ein temp Object, dient zur Zwischenspeicherung
  2. temp.stdheader < lib.stdheader
  3. # Löschen von lib.stdheader
  4. lib.stdheader >
  5. lib.stdheader = CASE
  6. lib.stdheader {
  7.   # Abfrage der Spalte
  8.   key.field=colPos
  9.   # Default Wert, wird ausgeführt wenn keine gesonderte Konfiguration für colPos vorhanden ist
  10.   default < temp.stdheader
  11.   # Für die mittlere Spalte, mittlere Spalte ist colPos 0
  12.   # Erst wird temp.stdheader kopiert
  13.   0 < temp.stdheader
  14.   # Jetzt wird die Grafikkonfofiguration kopiert
  15.   0.10.1 < temp.header_grafik
  16. }

Unterschiedlichen lib.stdheader für die Spalten

Mit lib.stdheader.10.1 temp.header_grafik wird allen Spalten die grafische Überschrift übergeben. Manchmal ist es doch erforderlich die Ausgabe auf eine Spalte zu begrenzen.

Dazu ist es Notwendig direkt auf das lib.stdheader zuzugreifen und Änderungen vorzunehmen.

temp.header_grafik wird wie oben beschrieben erstellt. Die Zweisung auf lib.stdheader mit lib.stdheader.10.1 < temp.header_grafik entfällt.

Um temp.header_grafik  in lib.stdheader zur Verfügung zu haben muss nur temp.header_grafik lib.stdheader.10.1 kopiert werden. 

Demo-Überschrift

Demo

Eine Überschrift-5 als Grafik eingebunden

Demo Überschrift
lib.stdheader.10.1 < temp.header_grafik
  1. lib.stdheader.10.1 < temp.header_grafik
temp.header_grafik = COA temp.header_grafik { 10 = IMG_RESOURCE 10.file = GIFBUILDER 10.file { XY = [10.w]+[20.w]+23,[10.h]+10 backColor = #ffffff 10 = TEXT 10 { text.current = 1 fontSize = 16 fontFile = fileadmin/yearsupplyoffairycakes.ttf offset = 23,20 fontColor = #000000 #niceText = 1 } } 10.stdWrap { wrap = <h1 style="background-image: url('|')"> append = TEXT append { current = 1 wrap = |</h1> } } }
  1. temp.header_grafik = COA
  2. temp.header_grafik {
  3.   10 = IMG_RESOURCE
  4.   10.file = GIFBUILDER
  5.   10.file {
  6.     XY = [10.w]+[20.w]+23,[10.h]+10
  7.     backColor = #ffffff
  8.     10 = TEXT
  9.     10 {
  10.       text.current = 1
  11.       fontSize = 16
  12.       fontFile = fileadmin/yearsupplyoffairycakes.ttf
  13.       offset = 23,20
  14.       fontColor = #000000
  15.       #niceText = 1
  16.     }
  17.  
  18.   }
  19.   10.stdWrap {
  20.     wrap = <h1 style="background-image: url('|')">
  21.     append = TEXT
  22.     append {
  23.       current = 1
  24.       wrap = |</h1>
  25.     }
  26.   } 
  27. }

Die background-Zuweisung erfolgt abweichend vom Orginal nicht in einer extra CSS sondern direkt per style im h1-Tag.

TypoScript

Das TypoScript muss nun eine Grafik erzeugen, abspeichern, den Pfad zur Grafik in der style-Angabe ablegen und zusätzlich noch den Text in den h1-Tag schreiben.

Das TypoScript unten ändert nur die Überschrift1, kann für weitere Überschriften leicht angepasst werden.

Als erstes wird ein TLO temp erstellt. Diesem TLO wird die Konfiguration für die Grafische Überschrift übergeben:

CSS

h1 { height: 25px; text-indent: -999em; width: 250px; }
  1. h1 {
  2.   height: 25px;
  3.   text-indent: -999em;
  4.   width: 250px;
  5. }

HTML

<h1 style="background-image: url('typo3temp/GB/81175d1456.gif')">Grafik Überschrift</h1>
  1. <h1 style="background-image: url('typo3temp/GB/81175d1456.gif')">Grafik Überschrift</h1>

Image-Replacement-Techniken

Vom Quelltext sind viele Image-Replacement-Techniken ähnlich, unterschiede gibt es im CSS für die Positionierung/Ausblenden des Textes.

Ich verwende vorzugsweise die Phark-Methode.

Gelegentlich besteht der Wunsch das Überschriften eine besondere Schriftart erhalten. Da nicht jede Schriftart auf jeden Rechner vorhanden ist, besteht die Möglichkeit die Schriftart mit @font-face per CSS einzubinden, http://de.selfhtml.org/css/eigenschaften/schrift_datei.htm. Allerdings wird diese Art der Einbindung nicht von allen Browsern unterstützt und und gehört nicht mehr zum Standard. 

Eine weitere Möglichkeit die Überschrift als Grafik zur Verfügung zu stellen. Allerdings sollte einiges beachtet werden damit die Einbindung Suchmachinenfreundlich (SEO) und Barrierefrei -arm erfolgt, und Struktur und Semantik erhalten bleibt. Lesen Sie zum Thema Barrierefreiheit und Image-Replacement den Artikel Image Replacement-Techniken
nicht zugänglich für Sehbehinderte

Umd dies zu erreichen wird die grafische Überschrift als Hintergrund eingebunden, die Text-Überschrift wird "normal" eingebunden und kann von Spidern / Robots und Screenreader erfasst und ausgewertet werden. Es gibt verschieden Techniken dies zu erreichen, die Image-Replacement-Techniken.

Phark-Methode

Snippets

Sponsored by:

ideenwerft webhosting
ideenwerft caretaker