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
Social Media Marketing: Dein Weg zu mehr Einkommen und finanzieller Unabhängigkeit
Mit jQuery Breite und Höhe des Browsers auslesen und in DIV-Container anzeigen.
OXID 6 | HTML5 Video in Produktdetails anzeigen
Programmierung und Spieleentwicklung: Gestalte deine eigenen Videospiele