Images als Liste darstellen

Hallo Zusammen,

ich benötige mal ein paar Typo3 Profis.
Ich setze momentan eine Webseite um wo es erforderlich ist, dass in einer bestimmten Spalte, wenn dort Bilder hineingeladen werden, diese als Listenelement zur Verfügung stehen.

Hier mal die HTML Snippets:

<div id="slides">
<ul class="slides-container">
<li>
<img src="http://flickholdr.com/1000/800" alt="">
<div class="container">
Slide one
</div>
</li>
<li>
<img src="http://flickholdr.com/1000/800/space" alt="">
<div class="container">
Slide two
</div>
</li>
<li>
<img src="http://flickholdr.com/1000/800/tech" alt="">
<div class="container">
Slide three
</div>
</li>
</ul>
<nav class="slides-navigation">
<a href="#" class="next">Next</a>
<a href="#" class="prev">Previous</a>
</nav>
</div>

Was nun erheblich stoert sind die ganzen Container die Typo3 Dazu bastelt. Diese habe ich zu 97% schon entfernt:

tt_content.stdWrap.innerWrap.cObject >
tt_content.stdWrap.innerWrap2 >
tt_content.dataWrap >
tt_content.prepend >
tt_content.textpic.20.text.10.10.stdWrap.dataWrap >
tt_content.image.20.imageStdWrap.dataWrap >
tt_content.image.20.imageStdWrapNoWidth.wrap >
tt_content.image.20.imageColumnStdWrap.dataWrap >
tt_content.image.20.layout.default.value = ###IMAGES######TEXT###
tt_content.image.20.layout.1.value < tt_content.image.20.layout.default.value
tt_content.image.20.layout.2.value < tt_content.image.20.layout.default.value
tt_content.image.20.layout.8.value < tt_content.image.20.layout.default.value
tt_content.image.20.layout.9.value < tt_content.image.20.layout.default.value
tt_content.image.20.layout.10.value < tt_content.image.20.layout.default.value
tt_content.image.20.layout.17.value < tt_content.image.20.layout.default.value
tt_content.image.20.layout.18.value < tt_content.image.20.layout.default.value
tt_content.image.20.layout.25.value < tt_content.image.20.layout.default.value
tt_content.image.20.layout.26.value < tt_content.image.20.layout.default.value
tt_content.image.20.rendering.dl.imageRowStdWrap.dataWrap >
tt_content.image.20.rendering.dl.oneImageStdWrap.dataWrap >
tt_content.image.20.rendering.dl.imgTagStdWrap.wrap >
tt_content.image.20.rendering.dl.editIconsStdWrap.wrap >
tt_content.image.20.rendering.dl.caption.wrap >
tt_content.textpic.20.text.10.10.stdWrap.dataWrap >
tt_content.textpic.20.text.wrap >

Das bleibt jedoch noch stehen:

<div class="csc-textpic-imagerow" style="width:600px;">|</div>

Zudem kommt, dass wenn ich alle Bilder in ein Imagemodul packe, die Bilder so gewrappt werden:

<ul><li>|</i></ul><ul><li>|</li></ul> ...

Ich schaffe es nicht alle in Einklag zu bringen. Kann mir da jemand behilflich sein?

Vielen Dank und Gruß

Hi,

weiß nicht, ob Du schon weitergekommen bist.
Ich brauchte für einen Bild-Slider eine ähnliche Struktur wie Du und habe das Problem wie folgt gelöst. (Typo3 4.5.25, die Grundidee stammt aus "100 Tipps für Typo3" von Patrick Lobacher und Volker Krell.)

// Umwandeln des Standard-Text+Bild-Elements in Slider-kompatible Ausgabe
// spaeter Zuordnung zu Dropdown-Menue "Layout 2"
// CASE-Objekt um Textpic-Element kopieren
temp.tt_content < tt_content.textpic
// altes Textpic-Element loeschen
tt_content.textpic >
// Neuaufbau als CASE-Objekt
tt_content.textpic = CASE
tt_content.textpic {
                    // Slider per Layout-Dropdown auswaehlbar machen
                    key.field = layout
                    // Textpic-Element als Default zurueckkopieren
                    default < temp.tt_content
                    // dem Slider als Basis ebenfalls dieses Element zuweisen
                    2 < temp.tt_content
                   }
                
// Folgende Aenderungen gelten ausschliesslich fuer Layout 2
tt_content.textpic.2.20 {
                        1.imageLinkWrap = 0
                        layout = TEXT
                        layout.value = <div id="slider"><ul>###IMAGES###</ul></div>
                        layout.insertData = 1
                        rendering.simple {
                          // DIVs um BUs + schliessendes LI
                          caption.wrap = <div>|</div></li>
                          imageStdWrap.dataWrap = |
                          imageStdWrapNoWidth.wrap = |
                          // oeffnendes LI
                          imgTagStdWrap.wrap = <li> | 
                        }
                        renderMethod = simple
                      }
  
// In PageTSconfig der Root-Seite dann einfuegen:
// TCEFORM.tt_content.layout.types.textpic.altLabels.2 = Slider

Das ergibt folgendes HTML

<div id="slider">
 <ul>
  <li><img src="..." width="600" height="219" alt="SliderAlt01" title="SliderTitle01" /><div>Slider BU1<br /></div></li>
 <li><img src="..." width="600" height="219" alt="SliderAlt02" title="SliderTitle02" /><div>Slider BU2<br /></div></li>
 </ul>
</div>

Nützt Dir das was?

Grüße!

Claas