TYPO3: den Datensatz „Bilder“ als einfache Liste ausgeben

Will man die im Datensatz „Bilder“ versammelten Grafiken als einfache Liste ausgeben, um sie z.B. mit einem jQuery Plugin zu animieren, so geht das am einfachsten folgendermaßen:

tt_content.image.20 {
  layout = TEXT
  layout.value = <ul>###IMAGES###</ul>
  layout.insertData = 1
  rendering.simple {
    caption.wrap = 
    imageStdWrap.dataWrap = |
    oneImageStdWrap.dataWrap = <li>|</li>
    imageStdWrapNoWidth.wrap = |
  }
  renderMethod = simple
}

Dieser Code stammt (leicht modifiziert) aus dem Buch „100 Tipps für TYPO3“ von Patrick Lobacher (Tipp 61).
Wichtig ist jedoch, dass man den geänderten Code nur verwendet, wenn man das für einen bestimmten Datensatz will und nicht generell im gesamten Auftritt.
Daher schließt sich im genannten Buch gleich Tipp 62 an:

temp.tt_content < tt_content.image
tt_content.image >
tt_content.image = CASE
tt_content.image {
  key.field = layout
  default < temp.tt_content
  2 < temp.tt_content
}

Damit wird gesagt, dass dieses Rendering der Bilder nur verwendet werden soll, wenn im Contentelement bei „Erscheinungsbild“ „Layout 2“ ausgewählt ist. Um das dem Redakteur zu verdeutlichen, wird „Layout 2“ ersetzt durch „Bilderliste“ (diese Zeite muss ins Page TSConfig):

TCEFORM.tt_content.layout.types.image.altLabels.2 = Bilderliste

Im TypoScript muss obiger Code allerdings vor den ersten und bei diesem muss die erste Zeile geändert werden:

tt_content.image.2.20 {
...

Eine Sache ist noch zu bedenken: das Rendering des Datensatzes „Text mit Bild“ orientiert sich am Rendering für „image“. Daher ist es günstiger, die Änderungen bei „textpic“ und nicht bei „image“ vorzunehmen und für die Bilderliste den Typ „Text mit Bild“ zu verwenden, auch wenn kein Text zum Einsatz kommt. Der gesamte Code sieht also so aus:

temp.tt_content < tt_content.textpic
tt_content.textpic >
tt_content.textpic = CASE
tt_content.textpic {
  key.field = layout
  default < temp.tt_content
  2 < temp.tt_content
}
 
tt_content.textpic.2.20 {
  layout = TEXT
  layout.value = <ul>###IMAGES###</ul>
  layout.insertData = 1
  rendering.simple {
    caption.wrap = 
    imageStdWrap.dataWrap = |
    oneImageStdWrap.dataWrap = <li>|</li>
    imageStdWrapNoWidth.wrap = |
  }
  renderMethod = simple
}

Man kann nun weiter machen (Tipp 63) und die Liste als vordefiniertes Inhaltselement dem Wizard hinzufügen. Das geschieht durch folgenden Eintrag ins Page TSConfig:

mod.wizards.newContentElement.wizardItems.mygroup {
  header =  eigene Elemente
  elements.my_image_list {
    icon = ../../../sysext/t3skin/icons/gfx/c_wiz/images_only.gif
    title = Sponsorenliste
    description = Liste von Bildern
    tt_content_defValues {
      CType = image
      layout = 2
      header = Bilderliste			
      header_layout = 100 # Überschrift verbergen
      section_frame = 66 # keinen Frame (csc-default) für dieses Element
    }
  }
show := addToList(my_image_list)
}
 
TCEFORM.tt_content.layout.types.textpic.altLabels.2 = Bilderliste