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>

While we’re on a roll here, how about removing the ridiculous inline styles from Blockquote tags, and allowing your custom CSS classes to hold their ground?

This one is buried right inside the bowels of the CSS Styled Content standard TypoScript, you can knock it on the head here:

lib.parseFunc_RTE.externalBlocks.blockquote.callRecursive.tagStdWrap.HTMLparser. \n
  tags.blockquote.overrideAttribs >

The above should appear on one line, without the \n, that was just to fit it in the code window without a scrollbar. I’m pretty confident this is a very very legacy bogeyman that no-one has bothered to clean up, due to the relatively small user-base that requires customisable Blockquotes in the RTE. Either way, now you know.

When configuring the TYPO3 RTE, it’s a common requirement to restrict the tags available to the editor. The RTE has dropdowns for block types which, by default, contains everything from p, through h1…h6, section, aside and so on… Not good news if you’ve got creative editors.

Removing these involved digging into the source here http://typo3.org/api/typo3/class_8tx__rtehtmlarea__blockelements_8php_source.html to discover a seemingly undocumented property in the RTE.

You can set this up as follows in your Page TS:

RTE { 
    default {
        buttons.formatblock.removeItems = h1,h5,h5,pre
    }
}

If anyone finds this, and wants a more detailed guide on adding and controlling the custom classes in the RTE, just shout loudly in the comments! Best of luck keeping your editors under control 😀

UPDATE: Also, watch out to make sure you’re reading the most up to date version of the RTE manual… DOH. I was reading an outdated one, which did not document the above. The current RTE manual can be found here, and outlines this feature. Always watch out for that, the Typo3 documentation can be a bit of a maze!