Bild aus den Seiteneigenschaften auslesen
Um Bilder aus den Seiteneigenschaften (Ressourcen) auszulesen gibt es verschiedene Möglichkeiten. Diese Methode wird gern genommen, um zum Beispiel Headerbilder auszugeben, die je nach Position im Seitenbaum variieren sollen.
Legen Sie zuerst in den Seiteneigenschaften im Reiter "Ressourcen" ein Bild an.
Im Typoscript-Setup können Sie das Bild mit folgendem Code auslesen, einem Objekt oder Marker zuweisen und entsprechend im Template ausgeben:
lib.headerimage = IMAGE
lib.headerimage {
file {
import.data = levelmedia:-1, slide
treatIdAsReference = 1
import.listNum = 0
}
}
Durch die Angabe von levelmedia:-1, slide wird entweder das auf der aktuellen Seite hinterlegte Bild genommen, oder, sofern keines vorhanden ist, das auf einer übergeordneten Seite.
import.listNum = 0 bedeutet, dass das erste eingefügte Bild ausgegeben wird.
Werden mehrere Bilder unter Ressources eingefügt, können diese nach dem Zufallsprinzip folgendermaßen ausgegeben werden:
import.listNum = rand
Bild als Hintergrundsbild einfügen
Bilder, die in den Seiteneigenschaften unter Ressourcen eingebunden wurden, können an verschiedenen Stellen der Webseite über CSS eingebunden werden. Auch ist es möglich verschiedene Bildgrößen, abhängig von der Bildschirmauflösung auszugeben.
Folgendes Beispiel läd das Hintergrundsbild in den Body
##Bild auslesen und für große Bildschirmauflösungen ausgeben
lib.imageresourceBig = IMG_RESOURCE
lib.imageresourceBig {
file {
import = uploads/media/
import.data = levelmedia:-1, slide
treatIdAsReference = 1
import.listNum = 0
width = 1600
height = 800
}
}
##Bild in kleinerer Auflösung ausgeben
lib.imageresourceSmall < lib.imageresourceBig
lib.imageresourceSmall {
file {
width = 800
height = 400
}
}
##CSS im Header laden mit Mediaqueries
page.headerData.13 = COA_INT
page.headerData.13 {
5 = TEXT
5.value = <style>
10 < lib.imageresourceSmall
10.stdWrap.wrap = @media (max-width: 768px){body { background-image: url(/|); }}
20 < lib.imageresourceBig
20.stdWrap.wrap = @media (min-width: 769px){body { background-image: url(/|); }}
30 = TEXT
30.value = </style>
}