Bilder und Bildtexte frei positionieren - mal wieder

Hallo,

Hab jetzt länger gesucht und nix wirklich passendes gefunden. Ich möchte mehrere Bilder und Bildtexte mittels css frei positionieren. Die Bildtexte sollen auf den Bildern liegen. Wenn man auf ein Bild (oder den Bildtext) klickt, wird auf eine andere Seite verlinkt.

Benutze das Content Element "Nur Bilder", Bildtexte sind mittels # getrennt.

Hab das jetzt so gemacht:

INHALT {
	table = tt_content
	wrap = |
				
	select {
		pidInList = this
		orderBy = sorting
	}
				
	renderObj = COA
	renderObj {
		10 = IMAGE
		10 {
			required = 1
			wrap = <div id="image1">|</div>
			file.import = uploads/pics/
			file.import.field = image
			file.import.listNum = 0
			file.import.listNum.splitChar = ,
		}
					
		20 = IMAGE
		20 {
			required = 1
			wrap = <div id="image2">|</div>
			file.import = uploads/pics/
			file.import.field = image
			file.import.listNum = 1
			file.import.listNum.splitChar = ,
		}
					
		50 = TEXT
		50 {
			required = 1
			field = imagecaption				
			wrap = <div id="text1" class="bildtext">|</div>
			listNum = 0
			listNum.splitChar = #
		}

		60 = TEXT
		60 {
			required = 1
			field = imagecaption				
			wrap = <div id="text2" class="bildtext">|</div>
			listNum = 1
			listNum.splitChar = #
		}

	}
}

Zum einen fehlen die Links, die ich ja in den wrap einbauen muesste. Um die aus dem Content Element in den wrap zu bekommen bräuchte ich aber Stringoperationen, die ich nicht habe?

Zum anderen wuerde ich gern fuer jedes Bild ein einzelnes Content Element vom Typ 'Nur Bilder' nehmen. Aber dann funktioniert listNum nicht mehr und beide Bilder erhalten die div-id "image1". Wie würde ich die Bilder dann im Code unterscheiden?

Wie soll denn am Ende der HTML Quellcode aussehen für so ein Element? Sollte eigentlich kein Problem sein, die Links auch in den Wrap reinzubekommen...

Was die ID angeht kannst du doch mit der UID des Elementes arbeiten. Die ist dann eindeutig, wenn du einzelne Bildelemente benutzt.

Viele Grüße
Christian

HTML sollte in etwa so aussehen:

<div id = "image1"><a href="meineseite.htm"><img src="meinbild1.jpg"></a></div>
<div id = "text1" class = "bildtext"><a href="meineseite.htm">Mein Bildtext1</a></div>

<div id = "image2"><a href="nochneseite.htm"><img src="meinbild2.jpg"></a></div>
<div id = "text2" class = "bildtext"><a href="nochneseite.htm">Mein Bildtext2</a></div>

Hab hier mal statische Linktargets genommen, weil ich die eigentlich verwenden möchte. Keine Idee wie ich die da reinbekommen könnte.

Die UID könnte ich über CASE abfragen... Super Tipp, vielen Dank. Die sind dann immer 0,1,2 bei z.B. drei Bildern? Auch wenn mal eins entfernt und hinzugefügt wird?

ich überleg mir mal was zu der struktur.
Die UID ist einmalig auf der ganzen Seite...
Die bekommst du einfach über field = uid so wie imagecaption auch.

Warum nimmst du nicht einfach das RTE im normalen Textelement?
Da kannst du Bilder verlinken und einen Bildtext verlinken...

Du kannst die Position auch frei einstellen...

brokemeister, ich möchte die Bilder pixelgenau positionieren und der Bildtext soll wie gesagt auf den Bildern liegen. Ich glaub das geht nicht mit dem RTE?

Kitsunet, dann wird das nix mit meinem schicken CASE Verteiler, die UIDs koennen ja beliebig sein.

Hab die erste Variante (alle Bilder in einem Content Element) jetzt so gemacht:

 5 = HTML
5 {
	value.field = image_link
	value.wrap = <div id = "image1"><a href = "|">
	value.listNum = 0
	value.listNum.splitChar = #
}

10 = IMAGE
10 {
	required = 1
	wrap = |</a></div>
	file.import = uploads/pics/
	file.import.field = image
	file.import.listNum = 0
	file.import.listNum.splitChar = ,
}

usw.

So würde es schon mal gehen. Ist mit den #-Trennern im BE allerdings nicht wirklich anwenderfreundlich.

Wäre noch die Frage wie man bei mehreren Content Elements bestimmt, der wievielte Durchgang (durch renderObj) es ist. Zähler? Geht sowas?

So, jetzt geht's auch mit mehreren Content-Elementen:

INHALT = CONTENT
INHALT {
	table = tt_content
	wrap = |
				
	select {
		pidInList = this
		orderBy = sorting
	}
				
	renderObj = COA
	renderObj {
		10 = HTML
		10.value = <div id = "image
					
		11 = HTML
		11.value.data = cObj:parentRecordNumber

		12 = HTML
		12.value.field = image_link
		12.value.wrap = "><a href = "|">
					
		20 = IMAGE
		20 {
			wrap = |</a></div>
			file.import = uploads/pics/
			file.import.field = image
		}
					
		30 = HTML
		30.value.field = image_link
		30.value.wrap = <a href = "|" class = "bildtext"><div id = "text
					
		31 = HTML
		31.value.data = cObj:parentRecordNumber

		40 = TEXT
		40 {
			field = imagecaption
			wrap = ">|</div></a>
		}
	}
}

Funktioniert im Gegensatz zur alles-in-einem-Version mit beliebig vielen Bildern. cObj:parentRecordNumber zählt ab 1 aufwärts.

Danke für die Hilfe, hätte ansonsten wohl aufgegeben.