3.1| ViewHelper: Image – Bilder einfügen

Im dritten Kapitel meines Tutorials „Typo3 Template mit Fluid programmieren“ geht es um ViewHelper. Es gibt eine ganze Reihe an ViewHelper in Typo3 Fluid.

Wir fangen in diesem Beitrag mit dem ViewHelper Image an, welcher Bilder in unser Template einbindet.

Der ViewHelper Image sieht folgendermaßen aus:

<f:image src="fileadmin/template/public/img/bild.jpg" alt="Alternativ text" />

Der Alttag ist in diesem ViewHelper verpflichtend. Man bekommt sonst im Typo3 Frontend eine Fehlermeldung. Der Viewhelper ist genauso wie der img-Tag in HTML aufgebaut. Es gibt ein src Attribut, welches für source steht, in dem der Pfad zum Bild steht.

Nun eine Frage: Warum nicht HTML Code ins Template schreiben, statt den ViewHelper?

Auch darauf gibt es eine einfache Antwort. Der ViewHelper Image bietet uns zusätzliche Funktionen. Zum Beispiel schneidet der ViewHelper Image unsere Bilder in die richtige Größe falls ein width Parameter angegeben ist.

<f:image src="fileadmin/template/public/img/bild.jpg" alt="Alternativ text" width="200px" />

Unser ViewHelper Image würde uns in diesem Fall das Bild auf eine Breite von 200 Pixeln schneiden.
Der img-Tag würde das Bild nun in voller Größe laden und nur verkleinert anzeigen. Der ViewHelper Image hingegen berechnet die proportional korrekte Höhe, schneidet das Bild in die richtige Größe und speichert das verkleinerte Bild temporär in das tmp Verzeichnis von Typo3 6. Dies ist natürlich auch möglich, wenn eine height anstelle einer width gegeben ist.

<f:image src="fileadmin/template/public/img/bild.jpg" alt="Alternativ text" height="200px" />

Typo3 CMS 6.1 FLUID Template programmieren:

Marvin Sengera

Hey! Ich bin Marvin Sengera, Inhaber der Internetagentur "Binärfabrik" aus Paderborn. Ich habe mein Bachelorstudium Informatik mit Schwerpunkt Industriespionage an der Hochschule Hamm Lippstadt abgeschlossen und absolviere derzeit meinen Master in Fachrichtung "Technical Entrepreneurship and Innovation". Ich beschäftige mich rund um die Themen Informatik, Innovation & Unternehmensgründung.

Das könnte dich auch interessieren …

Schreibe einen Kommentar