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" />
* Werbung/Affiliate Link
Aktien und ETFs kaufen

Kommentare

  • Anja
    23.11.2021 - 14:25 Uhr

    Sehr hilfreich und funktioniert einwandfrei.
    Danke!

    Antworten

Schreibe einen Kommentar

Erforderliche Felder sind entsprechend markiert.

Wird nicht veröffentlicht.

Datenschutz
Programmier-Tipps - Programmieren lernen ist nicht schwer!

Wir verwenden Cookies, um unsere Webseite für Dich optimal zu gestalten, fortlaufend zu verbessern und die Zugriffe auf unsere Webseite zu analysieren. Cookie-Informationen werden in deinem Browser gespeichert und helfen uns zu verstehen, welche Abschnitte der Website für dich am interessantesten und nützlichsten sind. Genauere Informationen findest du in unserer Datenschutzerklärung.

Notwendige Cookies

Notwendige Cookies sollten jederzeit aktiviert sein, damit wir deine Einstellungen für die Cookie-Einstellungen speichern können. Details findest du in unserer Datenschutzerklärung.

Google AdSense

Diese Website benutzt Google AdSense, einen Dienst zum Einbinden von Werbeanzeigen der Google Inc. ("Google"). Google AdSense verwendet sogenannte „Cookies“, Textdateien, die auf Ihrem Computer gespeichert werden und die eine Analyse der Benutzung der Website ermöglichen. Genauere Informationen findest du in unserer Datenschutzerklärung.

Diesen Cookie aktiviert zu lassen, unterstützt uns ohne dass du Geld ausgeben musst.

Google Analytics

Diese Website nutzt den Webanalysedienst Google Analytics, der sogenannte Cookies einsetzt. Dies sind kleine Textdateien, die auf Ihrem Device gespeichert werden und eine Analyse der Website-Nutzung ermöglichen. Die erzeugten Informationen werden in der Regel an einen Server von Google in den USA übertragen und dort gespeichert. Weitere Informationen findest du in unserer Datenschutzerklärung.

Das aktivieren ermöglicht es uns unsere Webseite für dich noch attraktiver zu machen.