TYPO3 FED + Flux Image Previews in BE

Thursday, October 11th, 2012 at 0033

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>

4 Comment for “TYPO3 FED + Flux Image Previews in BE”

  1. floxx Said this on

    I stumbled over this post while searching for a solution for this problem. FED is obsolete now, so I had to solve it with a simple VHS replacement to remove the relative part of the path:

    <img src="” />

    I hope it helps other people. :-)

  2. floxx Said this on

    Damn code replacement…here it goes again, now enclosed:
    <img src="" />

  3. Denyerec Said this on

    Still not sure your code came through, if you pastecode it to me I can add it to the post body, thanks!

  4. floxx Said this on

    Someone asked me about the snippet, so I remembered this post.
    Here it is: http://pastebin.com/1q0SPdja

Leave a Reply

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>