TYPO3 DCE-Extension and Images with Fluid

DCE offers in the backend two pre-configured ways of adding images:

TYPE Input -> input link
Type FAL -> fal abstraction layer

Input Link

<config>
	<type>input</type>
	<renderType>inputLink</renderType>
	<size>30</size>
	<eval>trim</eval>
	<softref>typolink,typolink_tag,images,url</softref>
	<fieldControl>
		<linkPopup>
			<options>
				<!--<blindLinkOptions>file,mail,page,spec,url</blindLinkOptions>-->
				<!--<blindLinkFields>class,params,target,title</blindLinkFields>-->
			</options>
		</linkPopup>
	</fieldControl>
</config>

The corresponding input field in the backend looks like this:

and after clicking on the link-symbol on the right:

ViewHelper f:image

The corresponding ViewHelper in the fluid template is the image ViewHelper with the „src“ element:

<f:image src="{field.img1}" alt="" />

If the alt-tag stays empty it takes the alt-tag from the FAL-section of the fileadmin, if it was set there before.
The following output is rendered:

<img src="/fileadmin/Images/delete-Layout-Images/20150714_144419-1920x1080.jpg" width="1920" height="1080" alt="test image">

With the FAL abstraction layer and an array of objects

<config>
	<type>inline</type>
	<foreign_table>sys_file_reference</foreign_table>
	<foreign_field>uid_foreign</foreign_field>
	<foreign_sortby>sorting_foreign</foreign_sortby>
	<foreign_table_field>tablenames</foreign_table_field>
	<foreign_match_fields>
		<fieldname>{$variable}</fieldname>
	</foreign_match_fields>
	<foreign_label>uid_local</foreign_label>
	<foreign_selector>uid_local</foreign_selector>
	<overrideChildTca>
		<columns>
			<uid_local>
				<config>
					<appearance>
						<elementBrowserType>file</elementBrowserType>
						<elementBrowserAllowed>gif,jpg,jpeg,tif,tiff,bmp,pcx,tga,png,pdf,ai,svg</elementBrowserAllowed>
					</appearance>
				</config>
			</uid_local>
		</columns>
		<types type="array">
			<numIndex index="2">
				<showitem>--palette--;LLL:EXT:core/Resources/Private/Language/locallang_tca.xlf:sys_file_reference.imageoverlayPalette;imageoverlayPalette,--palette--;;filePalette</showitem>
			</numIndex>
		</types>
	</overrideChildTca>

	<minitems>0</minitems>
	<maxitems>99</maxitems>

	<appearance>
		<useSortable>1</useSortable>
		<headerThumbnail>
			<field>uid_local</field>
			<width>45c</width>
			<height>45</height>
		</headerThumbnail>

		<enabledControls>
			<info>1</info>
			<dragdrop>1</dragdrop>
			<hide>1</hide>
			<new>0</new>
			<sort>0</sort>
			<delete>1</delete>
		</enabledControls>

		<createNewRelationLinkTitle>LLL:EXT:frontend/Resources/Private/Language/locallang_ttc.xlf:images.addFileReference</createNewRelationLinkTitle>
	</appearance>

	<behaviour>
		<allowLanguageSynchronization>1</allowLanguageSynchronization>
	</behaviour>

	<dce_load_schema>1</dce_load_schema>
	<dce_get_fal_objects>1</dce_get_fal_objects>
</config>

The ViewHelper for this image-objects-array

The corresponding ViewHelper in the fluid template is a foreach loop since we deal her with an array that has one or several image-objects:

<f:for each="{field.img2}" as="image" iteration="iterator">
  <f:image image="{image}" alt="" />	
</f:for>

To access only the second image we can use the iterator that is counting the loops of foreach:

<f:for each="{field.img1}" as="image" iteration="iterator">
  <f:if condition="{iterator.index} == 1">
    <f:image image="{image}" alt="" />
  </f:if>
</f:for>

Just one image to load

In 95 % of the cases only one image must be loaded. The FAL approach with the image preview and the chance to change e. g. the alt-tag, is the more convenient way to deal with images.

Using an array with objects and then a foreach loop is a coding overkill.

But the following code is NOT working:

Access only the first element of the array of the image-objects in the fluid templates:

# not working!
<f:image image="{field.img1[0]}" alt="" />
<f:image image="{{field.img1}[0]}" alt="" />

This is working (hint from the author of DCE, Armin Vieweg):

# get the first image {field.images.0}

<f:image image="{field.images.0}" alt="" />

# please not that it is not "src" but "image" inside the ViewHelper

With this you avoid the foreach loop but still have an array with image objects and not just one image object.

If you want to restrict the entry field of TCA to one image you can use:
<maxitems>1</maxitems>

There is another problem with this solution, if the DCE is not filled you will get an TYPO3 error message:

1/1) #1382284106 TYPO3Fluid\Fluid\Core\ViewHelper\Exception
You must either specify a string src or a File object.

To avoid this you must check if the image object is there, before starting the ViewHelper:

<f:if condition="{field.images.0}">
    <f:image image="{field.images.0}" alt="" />
</f:if>

TYPO3 Webdesign, TYPO3 Websites

Author:
Thomas Hezel
email: info@zazu.berlin