Kontentelement Bilder erstes Bild ansprechen

Hallo,

ich möchte beim Einfügen mehrerer Bilder (Seiteninhaltselement Typ Bilder) das erste Bild per CSS ansprechen. Wie kann ich das realisieren?

Derzeit sieht der erzeugte Quelltext wie folgt aus:

<div class="csc-textpic csc-textpic-left csc-textpic-above">
	<div class="csc-textpic-imagewrap" style="width:142px;">
		<div class="csc-textpic-imagerow" style="width:142px;">
			<ul>
				<li class="csc-textpic-image csc-textpic-firstcol csc-textpic-lastcol" style="width:142px;"><a href="uploads/pics/BA001.jpg" rel="shadowbox[sb7]"><img src="typo3temp/pics/82fba7b09b.jpg" width="142" height="106" alt="" /></a></li>
			</ul>
		</div>
		<div class="csc-textpic-imagerow" style="width:142px;">
			<ul>
				<li class="csc-textpic-image csc-textpic-firstcol csc-textpic-lastcol" style="width:142px;"><a href="uploads/pics/BA002.jpg" rel="shadowbox[sb7]"><img src="typo3temp/pics/9e57b3fd8e.jpg" width="142" height="110" alt="" /></a></li>

			</ul>
		</div>
		<div class="csc-textpic-imagerow" style="width:142px;">
			<ul>
				<li class="csc-textpic-image csc-textpic-firstcol csc-textpic-lastcol" style="width:142px;"><a href="uploads/pics/BA003.jpg" rel="shadowbox[sb7]"><img src="typo3temp/pics/958b6d60fc.jpg" width="142" height="101" alt="" /></a></li>
			</ul>
		</div>

...

Es müsste doch möglich sein an bspw. den DIV-Container <div class="csc-textpic-imagerow" style="width:142px;"> eine weitere Klasse (bspw. first) dranzuhängen. Oder alternativ allen nachfolgenden Bildern eine weitere Klasse, bspw. notfirst.

Über den Objekt-Browser bin ich auf zahlreiche Wraps gestoßen. Sogar einen der das letzte Bild mit der zusätzlichen Klasse 'csc-textpic-imagerow-last' wrapt:

tt_content.image.20.rendering.ul.imageLastRowStdWrap.dataWrap

Aber keiner scheint für das erste Bild vorgesehen zu sein. Ich habe mich auch schon an optionSplit versucht, aber das scheint nur bei Menüs zu funktionieren, oder?

Hat jemand einen entscheidenden Tipp für mich?
Vielen Dank, Manuel

Wenn es nur darum geht, das Bild per CSS anzusprechen, kannst Du im CSS den Selektor first-child verwenden.
Das sollte in etwa so klappen:

.csc-textpic-imagerow li:first-child img {/* lauter schöne Eigenschaften*/}

Hallo und vielen Dank für deine Antwort. Sie ist nochmal Anlass gewesen ein wenig weiter zu suchen und zu basteln. Dabei bin ich darauf gestoßen, dass über folgenden TS-Eintrag jedem Bild eine individuelle Klasse mitgeliefert werden kann:

tt_content.image.20.1.params = class="images_{field:uid}_{register:IMAGE_NUM}"
tt_content.image.20.1.params.insertData = 1

Ziel dieser Bemühungen war, nur das erste aller Bilder anzuzeigen und die übrigen auf display:none zu setzen. Daher gebe ich nun die Bilder einspaltig aus und wende obigen Schnipsel nicht auf das Bild sondern die umwrappenden DIVs an:

tt_content.image.20.rendering.ul.imageRowStdWrap.dataWrap = <div class="csc-textpic-imagerow img-{register:IMAGE_NUM}" style="width:{register:rowwidth}px;"><ul> | </ul></div>
tt_content.image.20.rendering.ul.imageLastRowStdWrap.dataWrap = <div class="csc-textpic-imagerow csc-textpic-imagerow-last img-{register:IMAGE_NUM}" style="width:{register:rowwidth}px;"><ul> | </ul></div>

Jetzt kann ich wie folgt via CSS nur das erste Bild anzeigen lassen:

#teaser div.csc-textpic-imagerow{
	display:none;
}
#teaser div.img-0{
	display:block;
}

Installiert ist die pmkshadowbox. Ist im Bilder-Content Klick-Vergrößern aktiviert werden alle Bilder in der Shadowbox als Galerie angeboten. Ich hätte auch eine beliebige Galerie-Extension verwenden können um dieses Ergebnis zu erzielen, halte diese Variante aber schlichtweg für die komfortabelste und einfachste Lösung um den Redakteuren zu ermöglichen schnell und mit den Standard-Typo3-Möglichkeiten Galerien bereitzustellen.

Hach... HowTo-Bereich? 🙂

Danke und Gruß,
Manuel