Typo3 - Bildermenü

So soll es aussehen (HTML)

Das Menü wird als Liste generiert. Unter jedem Bild steht außerdem noch ein Kasten mit dem Linktitel. Die Bilder enthalten zusätzlich alt und title Tags ebenfalls mit dem Titel der Seite. Die Links mit den Bildern bekommen noch die Klasse bild damit wir Sie leichter formatieren können.

<div id="menuPics">
  <ul>
    <li>
      <a href="#" class="bild"><img src="images/wer-wir-sind.jpg" width="157" height="92" border="0" alt="Über uns" title="Über uns" /></a>
      <a href="#" >Wer wir sind</a>
    </li>
    <li>
      <a href="#" class="bild"><img src="images/weiterbildung.jpg" width="157" height="92" border="0" alt="Gartenpflege" title="Gartenpflege" /></a>
      <a href="#" >Weiterbildungsprogramm</a>
    </li>

           ...

  </ul>

Typo Script

Mittels TS wird nicht nur die Struktur des Codes festgelegt, sondern über die Eigenschaft special.list und den values dazu auch festgelegt welche Seiten im Menü aufgenommen werden. In der Regel wollen wir ja nur eine bestimmte Anzahl.

Außerdem legen wir fest, daß die Bilder aus dem media Feld der Seite geholt werden, somit lassen sie sich leicht austauschen. Zudem könnte man noch eine Defaultgrafik festlegen falls kein Bild vorhanden ist (auskommentiert)

temp.naviPics = COA
temp.naviPics{
  10 = HMENU
  10.special = list
  10.special.value = 5,9,8,7
  10.special.data = leveluid:-1,
  10 {
    1=TMENU
    1{
      wrap = <ul>|</ul>
      NO{
        wrapItemAndSub = <li>|</li>
        before.cObject = IMAGE       
        before.cObject{
	  # Datei aus media Feld auslesen
          file{
            width = 122
            import {
              cObject = TEXT
              cObject {
                #value = Pfad zur Defaultgrafik
                #override {
                #  required = 1
                #  data = levelmedia:-1, slide
                #  wrap = uploads/media/ |
                #  listNum = 0 
                #} #override ende
              } #cObject Ende
              override {
                required = 1
                field = media
                wrap = uploads/media/ |
                listNum = 0
              } #override Ende
            } #import Ende
          } #file Ende
          altText.field = title 
          titleText.field = title
          imageLinkWrap = 1
          imageLinkWrap {
            enable = 1
            typolink {
              target = 
              parameter.field =  uid
              ATagParams = class="bild"
            } #Ende Typolink
          } #Ende imageLinkWrap
        } #before.cObject Ende
      } #NO Ende

      ACT < .NO 
      ACT = 1
      ACT{
        wrapItemAndSub = <li class="on">|</li>
      }
    }
    #1 Ende
  }
  #10 Ende
}

#temp Menu Ende