Zurück zur Übersicht

TYPO3: Typoscript - Bild aus dem Mediafeld/Seiteneigenschaften einer Seite ausgeben

#Tutorials #TYPO3

Immer wieder benötigt man für verschiedene Webseiten und Unterseiten verschiedene Bilder. bzw. Keyvisuals im Header. Das ist ansprechend und wertet eine Seite auf. TYPO3 bietet hier per Default die Möglichkeit in Seiteneigenschaften im Ressourcen-Tab ein oder mehrere Bilder hochzuladen.

Um diese Bilder im Template verwenden zu können benötigt man nur ein paar Zeilen TYPOSCRIPT.

Hier mal ein paar Beispiele:

lib.headerpic = IMAGE
lib.headerpic {
  file {
    import.data = levelmedia:-1, slide
    treatIdAsReference = 1
    import.listNum = 0
  }
}
Benutzung in Fluid
<header>
    <f:cObject typoscriptObjectPath="lib.headerpic" />
</header>

Erklärung zum Beispiel

Als erstes wird das Element als ein Bild deklariert. Danach wird gesagt, dass das Bild aus dem Feld media genommen wird. Die Option slide bedeutet, dass das Feld vererbar ist und so lange nach oben im Seitenbaum  gesucht wird, bis es ein Bild gibt. Die nächste Zeile bedeutet, dass es sich hierbei um einen Referenz-Datensatz handelt, die ID des Bildes also nicht das Bild selbst ist, sondern die Verknüpfung. Die letzte Zeile bedeutet, dass nur das erste Bild, also mit dem Index 0 genommen wird.

Bild als Hintergrund benutzen

Natürlich kommt es oft vor, dass man das Bild als Hintergrund einsetzen möchte. Das ist auch möglich und bedarf nur ein paar Änderungen am Code:

lib.headerpic = IMG_RESOURCE
lib.headerpic {
  file {
    import.data = levelmedia:-1, slide
    treatIdAsReference = 1
    import.listNum = 0
    width = 1400 #natürlich anpassbar!
    height = 400 #natürlich anpassbar!
  }
}
Benutzung in Fluid
<header style="background-image: url( {f:cObject(typoscriptObjectPath:'lib.headerpic')} )"></header>

Kommentare

Es gibt noch keine Kommentare. Sei der Erste!

Hinterlasse einen Kommentar

Antworten abbrechen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *

Kommentar wird gespeichert
Danke für deinen Kommentar! Sobald er freigegeben wurde erscheint er hier.