• CMS
Gastautor 31. Januar 2006

Typo3: Dynamische Grafiken und DHTML-Menüs

Kein Beitragsbild

von Jörg Drzycimski

Eine der Stärken des Open Source CMS Typo3 ist der Umgang mit dynamischen Elementen. Sei es der Umgang mit dynamisch erzeugten Grafiken für Buttons oder DHTML-Menüs, in Typo3 funktionieren solche Designelemente fast von alleine.

Der Funktionsumfang von Typo3 bietet unbegrenzte Möglichkeiten für dynamische Designelemente, wie grafische Buttons oder DHTML-Menüs. Selbst die Kombination aus beidem stellt für Typo3 kein Problem dar. Die DHTML-Menüs sind Bestandteil der immerhin fast 15MB großen Distribution, und für die dynamischen Grafiken lässt sich mühelos das Programm ImageMagick auf dem Webserver integrieren.

Dynamische Grafik
Um in Typo3 mit dynamischen Grafiken arbeiten zu können, benötigt man eine statisch compilierte Version von ImageMagick. Aus Gründen der Performance empfiehlt sich die ältere Version 4.2.9. Eine Installationsanleitung für den Webserver ist ebenfalls im Netz erhältlich..

Die einfachen Vorteile, die ImageMagick bietet, sind die dynamischen Skalierungen von Bildern im Content. So muss ein Redakteur nicht wissen, wie man Bilder verkleinert oder Thumbnails erzeugt, für ihn reicht das einfache Hochladen der Grafik, und Typo3 skaliert sie automatisch auf ein definiertes Mass. Diese Skalierung kann man sowohl für Thumbnails, als auch für die Grafik selber angeben. Zusätzlich besteht die Möglichkeit, die Grafiken als „Click-Images“ zu definieren, so dass bei Klick ein Extra-Fenster mit der Vergrößerung aufgeht.

Screenshot
Eingabe der Grafik inklusive Resizing und Klick-Vergrößern

Die wahre Stärke von Typo3 mit ImageMagick zeigt sich aber erst in der Erzeugung von Grafiken mit dynamischem Text, beispielsweise für Buttons. Auf diese Weise kann man die Seiten aus dem Pagetree mit Einzelbuttons darstellen, die eine „Hintergrundgrafik“ – den Button – plus den Linktext enthalten. Für neu hinzugefügte Seiten muss kein neuer Button erstellt werden, da Typo3 den Button mit Text automatisch einfügt.

Um diese Buttons zu erzeugen, muss im Setup des Templates ein GMENU-Objekt (für grafisches Menü) als Objekt des HMENUs mittels TypoScript angelegt werden. Das normale Setup – Plain Text ohne grafische Menüs – sieht folgendermaßen aus:

  # Default PAGE object:
    page = PAGE
    page.typeNum = 0
    # Ext. Stylesheet
    page.stylesheet = fileadmin/templates/styles.css

    # Menü
    temp.menu = HMENU
    temp.menu.1 = TMENU
    temp.menu.1 {
     NO {
      ATagParams = style="font-family: Arial; text-decoration: none;"
      allWrap = |<br>
     }
    }

    page.10 = TEMPLATE
    page.10 {
     #Haupt-Template einbinden
     template = FILE
     template.file = fileadmin/templates/template.html
     workOnSubpart = DOCUMENT_BODY
     # MARKER
     # Logo Grafik
     marks.LOGO = IMAGE
     marks.LOGO.file = fileadmin/templates/bulo-neg-plus.gif
     # Tabellenfarbe
     marks.COLOR = TEXT
     marks.COLOR.value = #FFFF00
     # SUBPARTS
     #Hauptnavigation
     subparts.MENU < temp.menu
     #Inhalt
     subparts.TEXT < styles.content.get
    } 

Oben: Der TypoScript-Code im Setup des Templates

Um grafische Buttons zu generieren, muss nun der Teil bearbeitet werden, der das Menü als „temp.menu“ erzeugt. Alle anderen Codezeilen bleiben gleich. Die Buttongrafik, die verwendet werden soll, wird in das /fileadmin/-Verzeichnis gelegt, und das „temp.menu“ mit folgendem TypoScript-Code ersetzt:

Button

Button-Grafik

       temp.menu = HMENU
    temp.menu.1 = GMENU
    temp.menu.1 {
     NO {
      wrap = | <BR>
      XY = [4.w], [4.h]
      backColor = yellow
      4 = IMAGE
      4.file = fileadmin/menuback.gif
      10 = TEXT
      10.text.field = {page:title}
      10.offset = 0,14
      10.align = center
      10.niceText = 1
     }
    } 

Oben: Der TypoScript-Code für das GMENU

Für den Linktext nutzt Typo3 normalerweise die GDLib, bei der man Abstriche an das Rendering des Textes machen muss – der Text auf den Buttons wird pixelig. Mit der Option „niceText = 1“ wird statt der GDLib ImageMagick eingesetzt, die mehrere Renderingvorgänge durchführt, so dass der Text klar lesbar ist.

Screenshot

Die fertige Website

Diese einfache Variante eines grafischen Menüs ist erweiterbar. Mit einem anderen Button liesse sich der Text zum Beispiel als GIFBUILDER-Objekt definieren, und mit Schatten oder Emboss-Effekt verschönern. Selbstverständlich ebenfalls dynamisch für alle Seiten. Auch ist es möglich, bei Fotos Copyright-Angaben zu integrieren, ohne dass diese mittels Grafikprogramm eingefügt werden müssen.

DHTML-Menüs
Die Distribution von Typo3 liefert die JavaScript-Funktionen für DHTML-Menüs gleich mit. Sie funktionieren für fast alle Browser und Betriebssysteme, angegeben sind MSIE4+, NS4+ (mit Einschränkungen), NS6+, Opera5+ und Konqueror.

Zum Erzeugen eines textbasierten Menüs wird ein TMENU_LAYERS-Objekt definiert, für grafische Menüs braucht man ein GMENU_LAYERS-Objekt. Das Script für die Objekte muss im Setup zusätzlich eingefügt werden, das Menü selber wird wieder nur im „temp.menu“ geändert, ohne den restlichen Code zu bearbeiten.

       # Benoetigte Libaries einfuegen
    page.includeLibs.tmenu_layers = media/scripts/tmenu_layers.php
    # DHTML-Menü erzeugen
    temp.menu = HMENU
    # Ebene 1 erzeugen
    temp.menu.1 = TMENU_LAYERS
    # Eigenschaften Ebene 1
    temp.menu.1 {
      layerStyle = position:absolute;VISIBILITY:hidden;
      # Menu verankern, damit es nicht der Maus folgt
      lockPosition = y
      # Position wo sich die naechste Ebene oeffnen soll (Ebene 2)
      relativeToParentLayer=1
      relativeToTriggerItem=1
      topOffset=10
      leftOffset=60
      # Angabe wann sich die naechste Ebene wieder schliessen soll
      hideMenuWhenNotOver = 50
      hideMenuTimer = 70
      # alle Menuepunkte anzeigen
      expAll=1
      # Darstellung der aktuellen Ebene
      wrap = <table border="0" cellspacing="0" cellpadding="5">|</table>
      # Darstellung im Normalmodus
      NO {
          ATagParams = class="mainnavi"
          allWrap = <tr><td  nowrap>|</td></tr>
      }
    }
    # Ebene 2 erzeugen
    temp.menu.2 = TMENU_LAYERS
    # Eigenschaften Ebene 2
    temp.menu.2 {
      layerStyle = position:absolute;VISIBILITY:hidden;
      # Menu verankern, damit es nicht der Maus folgt
      lockPosition = x
      # Position wo sich die naechste Ebene oeffnen soll (Ebene 2)
      relativeToParentLayer=2
      relativeToTriggerItem=2
      topOffset=20
      leftOffset=260
      # alle Menuepunkte anzeigen
      expAll=1
      # Darstellung der aktuellen Ebene
      wrap = <table width="180" border="0" cellspacing="0" cellpadding="0"
    bgcolor="#FFFF66"><tr><td height="1" colspan="4" bgcolor="#000000"><img
    src="fileadmin/images/0.gif" width="180" height="1"></td></tr>|<td
    height="1" colspan="4" bgcolor="#000000"><img src="fileadmin/images/0.gif"
    width="180" height="1"></td></tr></table>
      # Darstellung im Normalmodus
      NO {
          ATagParams = class="subnavi"
          allWrap = <tr><td width="1" bgcolor="#000000"><img
    src="fileadmin/images/0.gif" width="1" height="20"></td><td width="178">|</td><td></td><td
    width="1" bgcolor="#000000"><img src="fileadmin/images/0.gif" width="1"></td></tr>
      }
      # Ende Ebene 2
    } 

Oben: Der TypoScript-Code für das textbasierte DHTML-Menü

Der gezeigte Code würde eine Website mit zwei Ebenen abbilden. Um zusätzliche Ebenen aus dem Pagetree zugänglich zu machen, würde der Code, der die zweite Ebene erzeugt, dupliziert, angefügt und angepasst werden.

Screenshot
Die fertige Website

Fazit
Die in Typo3 integrierten Funktionen bieten zahlreiche Möglichkeiten, eine Website ansprechend zu gestalten. Die Kombination aus den oben genannten Menüs lässt sich einfach und schnell zu einem anspruchsvollen grafischen DHTML-Menü zusammenfassen, um den Lesern der Website etwas für das Auge zu bieten.

Erstveröffentlichung am 27.1.2005

Dr. Webs exklusiver Newsletter
Hinweise zum Datenschutz, also dem Einsatz von Double-Opt-In, der Protokollierung der Anmeldung, der Erfolgsmessung, dem Einsatz von MailChimp als Versanddienstleister und deinen Widerrufsrechten findest du in unseren Datenschutzhinweisen.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Kennst du schon unseren Newsletter?

Hinweise zum Datenschutz, also dem Einsatz von Double-Opt-In, der Protokollierung der Anmeldung, der Erfolgsmessung, dem Einsatz von MailChimp als Versanddienstleister und deinen Widerrufsrechten findest du in unseren Datenschutzhinweisen.

Cookies

Weitere Informationen zu den Auswahlmöglichkeiten findest du hier. Dazu musst du zunächst keine Auswahl treffen!

Um Dr. Web zu besuchen, musst du eine Auswahl treffen.

Deine Auswahl wurde gespeichert!

Informationen zu den Auswahlmöglichkeiten

Was du erlaubst!

Um fortfahren zu können, musst du eine Auswahl treffen. Nachfolgend erhältst du eine Erläuterung der verschiedenen Optionen und ihrer Bedeutung.

  • Ich stimme zu:
    Du erlaubst uns das Setzen aller Cookies, die wir in unseren Datenschutzhinweisen genannt haben. Dazu gehören Tracking- und Statistik-Cookies. Aus dem Tracking per Google Analytics bieten wir auf der Seite Datenschutz ein Opt-Out, also die Möglichkeit der Abmeldung, an.
  • Ich stimme nicht zu:
    Wir verzichten bei dieser Option auf den Einsatz von Google Analytics. Die für den Betrieb von Dr. Web notwendigen Cookies werden aber dennoch gesetzt. Einzelheiten entnimmst du bitte den Datenschutzhinweisen

Du kannst deine Cookie-Einstellungen jederzeit hier ändern: Datenschutz. Impressum

Zurück