Typo3 - Bildermenü

So soll es aussehen (HTML)

<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.menu1-top = COA
temp.menu1-top{
  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