Sie können in Typo3 CMS mit dem IMAGE-Objekt über TypoScript Bilder im Frontend anzeigen. Bevor Sie aber das IMAGE-Objekt benutzen können, benötigen Sie Dateien, die Sie ausgeben können. Hierzu können Sie das fileadmin Verzeichnis öffnen, welches lokal unter C:\xampp\htdocs\XXX\fileadmin oder unter Linux /var/www/XXX/fileadmin ist. Erweitern Sie im fileadmin die Ordnerstruktur mit dem Ordner „sys“. Das sys Verzeichnis soll Ihnen für alle Systemdateien dienen, also Dateien die Sie im Layout verwenden, z.B. CSS-  und JavaScript-Dateien oder auch Bilder. Unterhalb von sys können Sie noch ein Verzeichnis public ablegen. In diesem public-Verzeichnis kommen alle Dateien rein, die Sie über den Browser abrufen können. Sie können auch ein Verzeichnis privat anlegen. Hier können Sie dann später sämtliche Template-Dateien ablegen.

Innerhalb von public können Sie ein weiteres neues images-Verzeichnis anlegen und Grafiken in dieses Verzeichnis reinkopieren.

Wechseln Sie nun in das Typo3 CMS Backend, klicken Sie links auf das Template-Modul. Wählen Sie dann die Root Seite aus und klicken Sie auf Setup im Template-Werkzeug.

Hier können Sie mit folgender Anweisung ein Bild aus dem fileadmin laden
# obj wird als Prefix ausgwählt mit dem Bezeichner image. Das wird dann dem IMAGE-Objekt zugewiesen
obj.image=IMAGE
#Pfad zu der Datei mit der Eigenschaft file
obj.image.file=fileadmin/sys/public/images/alkunmedia_logo.jpg


page=PAGE
#das Objekt obj.image wird an das PAGE-Objekt an der Stelle 10 gebunden
page.10  obj.image

bild ausgabe in typo3

 

Weitere Eigenschaften des IMAGE-Objekts

altText

altText setzt das Attribut alt, falls ein Bild ausgegeben wird. Wird kein Wert angegeben, wird ein leeres alt-Attribut eingefügt. Das altText ist eine Beschreibung als alternativ Text, falls das Bild nicht geladen werden kann.

obj.image=IMAGE
obj.image.file=fileadmin/sys/public/images/alkunmedia_logo.jpg
#alt-Attribut
obj.image.altText=LogoAlkunMedia
page=PAGE
page.10  obj.image

border

Mit dem border Attribut können Sie ein Rand um das Bild ziehen

obj.image=IMAGE
obj.image.file=fileadmin/sys/public/images/alkunmedia_logo.jpg
obj.image.altText=LogoAlkunMedia
#Border für ein Rand um das Bild
obj.image.border=5
page=PAGE
page.10  obj.image

titleText

Das titleText Attribut setzt einen Titel für das Bild. Wird kein Wert angegeben, wird der Wert von altText verwendet.

longdescURL

Mit longdescURL wird das longdesc Attribut erzeugt. Sie können hiermit auf eine URL verweisen, unter der die Grafik in Textform näher beschrieben wird.

linkWrap

linkWrap wird verwendet um einen Link um das Bild zu legen.

page=IMAGE
page.10 {
file=fileadmin/sys/public/images/alkunmedia_logo.jpg
wrap=<div>|</div>
linkWrap=<a href='https://www.google.de/'>|</a>
}

 

imageLinkWrap

Mit imageLinkWrap erzeugen Sie einen Link auf die Datei. Sie ist nur aktiv wenn linkWrap nicht gesetzt ist.

obj.image=IMAGE
obj.image.file=fileadmin/sys/public/images/alkunmedia_logo.jpg
obj.image.altText=LogoAlkunMedia
obj.image.imageLinkWrap=1
obj.image.imageLinkWrap.enable=1

#typolink verweist auf die interne Seite mit der ID=1
obj.image.imageLinkWrap.typolink=1

page=PAGE
page.10  <obj.image

TypoScript Image Parameter

ParameterTypeBenötigtBedeutung
fileimgResourcejaPfad zur Dateei
altTextStringneinAlt-Attribut
borderIntneinRand um das Bild
titleTextStringneinTitle-Attribut
longdescURLStringneinLongdesc-Attribut
linkWrapStringneinLink um das Bild
imageLinkWrapBooleanneinLink auf die Datei

 

Haben Sie Fragen oder Probleme bei der Webentwicklung mit Typo3 CMS und bei dem IMAGE-Objekt in TypScript? Gerne helfen wir Ihnen weiter. Kontaktieren Sie uns einfach.