TYPO3 Ressourcen Image auslesen und anzeigen ab Version 6.2

Das Einbinden der Ressourcenbilder in den Seiteneigenschaften von TYPO3 ist eigentlich sehr einfach. Ab der Version 6.2 hat sich hier allerdings was geändert. Folgend zeige ich 3 verschiedene Möglichkeiten wie das auslesen und anzeigen der Ressourcenbilder ohne Probleme klappt.

Standard auslesen und anzeigen von einem Bild.

lib.resourcenImage = IMAGE
lib.resourcenImage {
  #Standard Bild (Pfad anpassen) wenn keines gewählt ist
  file = fileadmin/template/images/default.jpg
  #Wenn ein Bild hochgeladen wurde, wird das Standard Bild überschrieben
  file {
    import =  uploads/media/
    import.data = levelmedia:-1, slide
    treatIdAsReference = 1
    import.listNum = 0
    width = 1170
    height = 400c
  }
}

Folgenden Marker im Template eintragen um das Bild anzuzeigen:

<f:cObject typoscriptObjectPath="lib.resourcenImage" />

Bild auslesen und als Hintergrund darstellen

temp.resourcenImage = IMG_RESOURCE
temp.resourcenImage {
  file {
    import =  uploads/media/
    import.data = levelmedia:-1, slide
    treatIdAsReference = 1
    import.listNum = 0
  }
}
page.headerData.10 < temp.resourcenImage
page.headerData.10.stdWrap.wrap = <style type="text/css">body {background: url(|) no-repeat center center fixed;}</style>

Das Hintergrundbild wird in dem Beispiel dem body-Tag zugewiesen. Es wäre auch möglich einen DIV-Container anzusprechen. Hierzu einfach body durch #DIV austauschen. Der DIV-Container muss dann aber auch im Template vorhanden sein.

Bild und Bildbeschreibung auslesen und anzeigen

lib.resourcenImage = FILES
lib.resourcenImage {
  references {
    table = pages
    uid.data = tsfe:id
    fieldName = media
  }
  renderObj = COA
  renderObj {
    10 = IMAGE
    10.wrap = |
    10.file.import.data = file:current:publicUrl
    20 = TEXT
    20.wrap = <figcaption>|</figcaption>
    20.data = file:current:description
  }
  stdWrap.wrap = <figure>|</figure>
  stdWrap.required = 1
}

Folgenden Marker im Template eintragen um das Bild und die Bildbeschreibung anzuzeigen:

<f:cObject typoscriptObjectPath="lib.resourcenImage" />

---

Gefällt dir das Skript oder hast du einen Fehler gefunden? Dann freue ich mich auf deinen Kommentar.
Ich wünsche dir viel Erfolg bei deinem Projekt.