Bilder in TYPO3 12

Wichtig ist der extensionName! Hat die Extension den Key sp_schnee, dann ist der extensionName: SpSchnee

f:uri.resource

Ziel: Liefert nur die URL zu einer Datei aus dem Ressourcen-Verzeichnis einer Extension (oder aus FileStorage). Was du bekommst: → Eine String-URL, z. B. /typo3conf/ext/spmehliskopf/Resources/Public/Dummy/Images/banner_3.jpg Kein Bild-Tag, keine Größenänderung, nur der Link.

{f:uri.resource(path: 'Dummy/Images/banner_3.jpg', extensionName: 'SpMehliskopf')}
FLUID

f:uri.image

Ziel: Generiert die URL zu einem Bild, wobei TYPO3 optional eine Bildverarbeitung (Resize, Crop …) durchführt. Was du bekommst: → Eine verarbeitete Bild-URL, z. B. zu einer generierten Datei im typo3temp/assets-Verzeichnis. Sie kann durch Parameter wie width, height, minWidth, maxWidth usw. beeinflusst werden.

<f:uri.image image="{item.foregroundMedia.0}" />

<f:comment>Inline:</f:comment>
{f:uri.image(src: 'EXT:myext/Resources/Public/typo3_logo.png', minWidth: 30, maxWidth: 40)}

<f:comment>mir image statt src:</f:comment>
{f:uri.image(image: '{item.foregroundMedia.0}

Beispiel News-Bilder 

<f:comment>url des processed images, z.b. in der news-extension:</f:comment>
<f:if condition="{newsItem.mediaPreviews}">
	<f:then>
		<div class="card" style="background-image: url({f:uri.image(src:newsItem.mediaPreviews.0.uid, treatIdAsReference:1, width:'200c')});">
	</f:then>
	<f:else>
		<f:if condition="{settings.displayDummyIfNoMedia}">
			<div class="card" style="background-image: url({f:uri.image(src:settings.list.media.dummyImage, treatIdAsReference:1, width:'200c')});">
		</f:if>
	</f:else>
</f:if>