Sie befinden sich hier

Inhalt

Einfaches Bildmenü ohne Image Processing

Mit folgendem TS können schnell und einfach Bilder-Menüs mit dem TMENU erstellt werden. Mit dieser Variante spart man sogar das Image processing auf dem Server, muss aber dann natürlich die Bilder bereits in der richtigen Größe auf dem Server ablegen.

Das Skript greift im Beispiel auf den Ordner fileadmin/templates/menu_images/ zu und erwartet hier Bilder mit dem Präfix icon_ im JPG-Format. Der Name des Bildes wird aus dem Feld "subtitle" in den Seiteneigenschaften der Zielseite gezogen. Gibt dort z.B. beratung ein, wird im Ordner das Bild icon_beratung.jpg gesucht. Der subtitle wird zusätzlich zur Generierung des alt-Attributes genutzt. Das titel-Attribut wird aus dem Beschreibungsfeld (description) erstellt, wenn es nicht vorhanden ist, wird das title-Feld benutzt.

Durch die Verwendung des title- und alt-Attributes ist das Menü SEO-tauglich. Die Felder müssen nur sinnvoll ausgefüllt werden.

Zur Konfiguration können z.B. folgende Felder in den Seiteneigenschaften vom Typ "Erweitert" benutzt werden:

  • abstract
  • description
  • subtitle
  • title
  • alias

lib.imagenav = HMENU
lib.imagenav    {
  ## Kommentare für bestimmte Einstiegspunkte im Seitenbaum entfernen
  #special = directory
  ## PID des Einstiegspunktes
  #special.value = 9
  1 = TMENU
  1    {
   wrap = |
   noBlur = 1
   NO    {
    ## Umbruch hinter jedem Bild
    allWrap = |
    stdWrap.cObject = COA
    stdWrap.cObject    {
     10 = TEXT
     10.wrap = <img src="/fileadmin/templates/menu_images/icon_|.jpg"
     ## Bildname wird aus dem subtitle-Feld der Zielseite erstellt
     10.data = field:subtitle
     20 = TEXT
     20.wrap = alt="|"
     ## alt wird aus dem subtitle-Feld der Zielseite erstellt
     20.data = field:subtitle
     30 = TEXT
     30.wrap = title="|" />
     ## tile wird aus dem description- bzw. title-Feld der Zielseite erstellt
     30.data = field:description//field:title
   }
  }
## Zustand bei aktueller Seite mit Grundeinstellungen aus NO befuellen
ACT < .NO
ACT = 1
## Das Praefix wird geaendert um ein anderes Bild zu nehmen
ACT.stdWrap.cObject.10.wrap = <img src="/fileadmin/templates/menu_images/act_|.jpg"
  }
}

Wichtig

Bitte beachten, dass kein RO Zustand dargestellt werden kann, da es sich bei dem Menü um ein TMENU handelt und nicht um ein GMENU.

Kontextspalte