VT 8 LTS - 04-11
04-11-css-javascript-einbinden

04-12-hintergrundbild-aus-seiteneigenschaften

meine Notizen

Dynamisches Generieren des Hintergrundbildes z.B. für das Jumbotron oder an einer anderen Stelle

  1. Im TYPO3-BackEnd in den Seiteneigenschaften den Reiter Resourcen öffnen
     
  2. 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
     
  3. Nun eine Datei auswählen und ggfs. individuelle Metaangaben setzen und die Seite speichern.
     
  4. Im Editor im Design-Extension-Verzeichnis / Configuration / TypoScript / Modules eine neue Datei anlegen
    z.B. logoimg.ts
     
  5. 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
        }
    }
  6. 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
     
  7. 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>
     

  8.  

TypoScript Reference

TypoScript Reference - Content Objects (cObject) - IMG_RESOURCE

TypoScript Reference - Data Types - imgResource

TypoScript Reference - Functions - imgResource


VT 8 LTS - 04-13
04-13-backendlayouts-erstellen-und-zuweisen