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" />
Kommentare
Sehr hilfreich und funktioniert einwandfrei.
Danke!
Weitere Beiträge
CSS3 Animation mit CSS Transitions
Einführung in React.js für Anfänger 2024
OXID 6 | Modul erstellen mit Namespaces und Composer
Passives Einkommen aufbauen mit wenig Kapital: So startest du mit kleinem Budget