04-12-hintergrundbild-aus-seiteneigenschaften
meine Notizen
Dynamisches Generieren des Hintergrundbildes z.B. für das Jumbotron oder an einer anderen Stelle
- Im TYPO3-BackEnd in den Seiteneigenschaften den Reiter Resourcen öffnen
- Es ist möglich einer Seite bestimmte Resourcen zuzuweisen.
Was die Seite mit den Medien wie anstellt, bleibt dabei zunächst offen, das ist Sache des Integrators.
Bilder können beispielsweise im FrontEnd angezeigt, Dateien zum Download angeboten werden.
Die Schaltfläche Neue Relation erstellen klicken
- Nun eine Datei auswählen und ggfs. individuelle Metaangaben setzen und die Seite speichern.
- Im Editor im Design-Extension-Verzeichnis / Configuration / TypoScript / Modules eine neue Datei anlegen
z.B. logoimg.ts
- Erforderlich ist ein Content-Object vom Typ IMG_RESOURCE
Zunächst ein temporäres Objekt anlegen.
temp.logoimg = IMG_RESOURCE
temp.logoimg {
file {
import.data = levelmedia:-1, slide
setzt um:
- siehe in den Seiteneigenschaften, ob ein Bild vorhanden ist ( media )
- siehe in den übergeordneten Seiteneigenschaften, ob ein Bild vorhanden ist ( levelmedia:-1, slide ), slide im Seitenbaum nach oben
treatIdAsReference = 1
Es können auch mehrere Bilder für diesen Zweck verwendet werden, dazu folgende Codezeile
import.listNum = rand
}
} - Diese Referenz auf das Bild muss nun in der Seite zur Ausgabe eingebunden werden.
page.headerData.1429854794594 < temp.logoimg
weist den Inhalt des temporären Objekt - einen Dateipfad - dem Header der Webseite zu, Bezeichnung des page.Header-Objekts möglichst zufällig, um Kollisionen mit anderen Extensions zu vermeiden
- Der Dateipfad muss noch von gewünschtem html-Code umgeben werden
page.headerData.1429854794594.stdWrap.wrap = <style>body { background-color: silver; background-image: url("|"); color: darkgreen; }</style>
TypoScript Reference
TypoScript Reference - Content Objects (cObject) - IMG_RESOURCE
TypoScript Reference - Data Types - imgResource
TypoScript Reference - Functions - imgResource