Unsere Snippets

Mehrzeiliger Überschriftentext im GIFBUILDER

Will man nicht ständig auf die Websichere Schriften angewiesen sein bei seinen Überschriften, hat man mit dem GIFBUILDER von TYPO3 ein sehr mächtiges Werkzeug.

Da gerade Überschriften Suchmaschinentechnisch relevant sind, gebietet es sich hier der Pflicht des Webentwicklers, eine Image Replacement Technik zum Einsatz zu bringen.
Der Vorteil beim GIFBUILDER von TYPO3 man brauch bei Verwendung einer IRT, wie in diesem Beispiel beschrieben kein Javascript oder Flash einzusetzen.

Wir gehen in diesem Beispiel davon aus wir später das Datenbankfeld header aus der Tabelle tt_content entsprechend auswerten und in eine Grafik umwandeln lassen, welches wir widerum in einen H1-Tag einbetten in Form CSS Background-images. Es geht aber natürlich auch mit jedem anderen beliebigen Datenbankfeld welches eine entsprechende TCA-Konfiguration hat. Zudem wollen wir eine mehrzeilige Überschriften haben, was aber nicht so sehr das Problem sein sollte.

Umwandeln des Eingabefeldes im TCA in ein Textarea Feld

Als erstes muss man dafür sorgen, das das Eingabefeld für die Überschrift bei den Inhaltselementen in der TCA-Konfiguration vom Typ input auf text umgestellt wird, damit wir ein mehrzeiliges Eingabefeld sprich einen TEXTAREA erhalten. Dies kann man direkt im TS-Config tun oder auch in der ext_tables.php im typo3conf-Ordner.

Ist dies geschafft baut man den in der unteren Typoscript Code Box befindlichen Beispielcode in sein Templateein und weißt diesen später einem Unterobjekt des Objektes lib.stdHeader welches über die das Template css_styled_content automatisch zur Verfügung steht. Durch Verwendung des cObject IMG_RESOURCE gewährleisten wird das wir nur einen Pfad zum Bild entsprechend generiert bekommen, da wir das Bild letztendlich nicht in Form eines IMG-Tags benötigen, sondern als Background-image in ein H1-Element einbetten werden.

Zu beachten ist das wir dem TEXT-Objekt des GIFUBILDER-Objekts die folgende Untereigenschaft geben 10.text.br = 1. Somit bleiben vom Redakteur durch SHIFT+RETURN erzeugte Zeilenumbrüche innerhalb des Feldes nach Abspeichern in der Datenbank erhalten und werden später bei der Verarbeitung durch den GIFBUILDER entsprechend ausgewertet.

Auswerten der Abmessungen über ein Register

Zur Ermittlung der letztendliche Höhe und der Breite des generierten Bildes bedienen wir uns zwei fast unbekannten Registern die im Typoscript Frontend Array oder auch kurz TSFE, zu finden sind.

  • TSFE:lastImgResourceInfo|0 für die Höhe
  • TSFE:lastImgResourceInfo|1 für die Breite

Diese Werte betten wir schließlich mit einigen anderen CSS Anweisungen als inline-style in den H1 Tag ein, welchen wir über stdWrap.innerWrap entsprechend wrappen. Wir benötigen hier einen innerWrap, weil dieser wiederum über stdWrap Eigenschaften verfügt, welchem einem normalen Wrap versagt bleibt.

lib.multiColumnHeader = IMG_RESOURCE
lib.multiColumnHeader {
              file = GIFBUILDER
              file {
                    XY = [10.w]+ 120 ,[10.h]+ 10   
                     backColor = #ECDDCC
                     10 = TEXT
                     10.text.field = header
                     10.text.br = 1
                     #10.spacing = 2
                     10.fontFile = fileadmin/files/fonts/57689___.ttf
                     10.fontColor = #000000
                     10.fontSize = 26
                     10.iterations = 2
                     10.offset = 1, 24
              }
              stdWrap {
                   innerWrap.cObject = COA
                   innerWrap.cObject {
                        10 = TEXT
                        10.value (
<h1 class="gtHead" style= "background:url(|) no-repeat;background-position:3px 3px;height:{TSFE:lastImgResourceInfo|0}px;width:{TSFE:lastImgResourceInfo|1}px;">
<span>{field:header}</span></h1>
)                  
                        10.insertData = 1
                   }

                  
              }
       
        }

###Einbinden in das lib.stdheader Objekt von css_styles_content
lib.stdheader.10.6 < lib.multiColumnHeader

 

Der notwendige CSS-Code für die hier verwendete Image-Replacement-Technik beschränkt sich übrigens auf ein Minimum für das H1-Element sowie das innerhalb des H1 befindliche SPAN-Objekt, welches letztendlich den für die Suchmaschinen lesbaren Überschriftentext enthält.

.csc-header h1.gtHead SPAN {
display:block;
height:1px;
overflow:hidden;
width:1px;
}

 

Beispiele dieses Snippets im produktiven Einsatz

Kategorie: Typoscript
Ansprechpartner: Timo Prüssing (www.mediengarage.de)
« Zurück