Bilder in TYPO3 Fluid anzeigen

Der f:image-ViewHelper

In Fluid lassen sich Bilder über einen einfachen <f:image/--ViewHelper Anzeigen. Die Attribute entsprechen denen des bekannten img-Tags aus html:

		<!-- Ausgabe mit img-Tag -->
<!-- Datei-Pfad -->
<f:image src="EXT:myextension/Resources/Public/img/picture.jpg" alt="description" />
<!-- Image-Objekt -->
<f:image image="{imageObject}" alt="description" />

<!-- Alleinige Ausgabe des Datei-Pfades  -->
<!-- Datei-Pfad -->
{f:uri.image(src:'EXT:myextension/Resources/Public/img/picture.jpg',width:'320')}
<!-- Image-Objekt -->
{f:uri.image(image:images.0, treatIdAsReference:1, width:320px)}

fluid und data-Attribute

Im Normalfall lassen sich data-Attribute relativ einfach in html-Tags integrieren:

		<f:image additionalAttributes="{data-anyattribute: 'something'}" />
additionalAttributes in Fluid

Hier ein Beispiel für die Syntax, wenn man eine Lightbox/Fancybox oder andere Bildergalerien einbinden möchte (und das "Escapen" mit einem Backslash nicht greift):

		<a href="{f:uri.image(image:file,width:800)}"
   data-lightbox="<f:format.raw>{</f:format.raw>group:'gallery1'<f:format.raw>}</f:format.raw>">
     <!-- html-code -->
</a>
data-Attribute und Sonderzeichen

DCE-Extension (dynamic content elements)

Für den Aufbau von komplexeren Layout-Elementen bietet sich die DCE-Extension an.

Auch hier lassen sich Bilder auf einfache Weise einbinden. Dazu legt man bei dei den Variablen (fields) eine neuie Bild-Variable an und wählt dazu in der Konfiguation den File abstraction layer (recommended) aus.

Im Template-Reiter > Template content (fluid) kann man nun über die folgenden Varianten auf die Bilder zugreifen:

		<f:for each="{field.images}" as="fileReference">
    <f:image class="img-fluid" image="{fileReference}"/>
</f:for>
Einfacher Zugriff über f:image

Ebenso kann man im inline-Style auf die Eigenschaften des Bildes zugreifen (dies ist besonders im Aufbau von javascript - Bildergalerien/Slideshows sehr hilfreich).

		<f:for each="{field.images}" as="fileReference">
    <a href="#"
       data-thumb="{f:uri.image(src:'{fileReference.uid}',treatIdAsReference:'1')}">
        {fileReference.title}
    </a>
    <span>{fileReference.description}</span>
</f:for>
inline-Style z.B. für a-Tag-Attribute

Danach sollte man nicht vergessen, den dce-Temolate-Cache zu leeren.