Zum Inhalt springen

Mehrere Bilder über Resources einfügen

Bei einem sehr breiten Header können mehrere Einzelbilder nebeneinander ausgegeben werden. Der Redakteur muss dazu nur mehrere Bilder in den Seiteneigenschaften › Resources einfügen.

Der Rest macht TypoScript und CSS.

TypoScript:

temp.headerimage = COA
temp.headerimage.10 = IMAGE
temp.headerimage.10 {
file.import.data = page:media file.treatIdAsReference = 1 file.import.listNum = 0 file.height = 165 altText = TEXT altText.field = subtitle//title }
temp.headerimage.20 < temp.headerimage.10
temp.headerimage.20.file.import.listNum = 1
temp.headerimage.30 < temp.headerimage.10
temp.headerimage.30.file.import.listNum = 2
temp.headerimage.40 < temp.headerimage.10
temp.headerimage.40.file.import.listNum = 3
temp.headerimage.50 < temp.headerimage.10
temp.headerimage.50.file.import.listNum = 4
temp.headerimage.60 < temp.headerimage.10
temp.headerimage.60.file.import.listNum = 5

page.10.marks.HEADERIMAGES < temp.headerimage
page.10.marks.HEADERIMAGES.stdWrap.wrap = <div class="headerimage">|</div>

CSS für den div Tag, welches die Bilder umgibt:

div.headerimage {
height: 165px;
/*Damit die Bilder nicht ueber den vorgehenen Bereich
hinaus gehen oder mehrzeilig werden*/
overflow: hidden;
white-space: nowrap;
}
Aktualisiert: 04.05.2023