Zum Inhalt springen

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>
}

 

Aktualisiert: 04.05.2023