denyerec.co.uk

If you’re using TYPO3 along with the jolly-lovely FED/Flux templating system then you may well have tried to make an FCE preview in the backend that includes an image preview.

Here’s where I started:

{namespace fed=Tx_Fed_ViewHelpers}
{namespace flux=Tx_Flux_ViewHelpers}

<f:layout name="FCE/Photo" />
<f:section name="Configuration">
	<flux:flexform id="photoConfig" label="Photo Configuration" enabled="TRUE">
		<flux:flexform.sheet name="photoDetails" label="Photo Details">
			<flux:flexform.field.file name="photoFile" internalType="file" allowed="jpg" maxItems="1" showThumbs="1" label="Selected Photo" />
			<flux:flexform.field.input name="altText" label="Image Alt Text / Title" />
		</flux:flexform.sheet>
	</flux:flexform>
</f:section>

<f:section name="Preview">
	<f:image src="{photoFile}" height="80" alt="{altText}"/>
</f:section>

However, this doesn’t work out so well. A quick showed that the returned image resource path was relative, such as:

../typo3temp/pics/d2d39d7307.jpg

This ain’t gonna work as we’re in the BE context and I wasn’t able to fool it with any number of ../../ attempts as it always resulted in a Resource Not Found error.

The solution? FED includes an Image viewhelper (Docs) that’s crazy powerful, BUT, and here’s the important part, it renders the resulting image resource out with an absolute path, making it useful in both FE and BE contexts.

The result?

<fed:image src="{photoFile}" height="80" alt="{altText}"/>

Job done.

Update:

Code snippet from Floxx:

<f:section name="Preview">
	<img src="<v:format.replace substring=".." content="{f:uri.image(src: '{file}', height: '50')}" replacement="" />" />
</f:section>