How to readout an image in a Fluid template and give it a click enlarge function in DCE typo3 + FAL

How to wrap image with link in DCE + FAL

For set link around image with same resource you have to use “<f:uri.image>” following example will help you more.

Your fluid template gets an array of FileCollection models,

Following example will show you how to output several images from the FileCollection and wrap with link with same image resource

TCA Configuration for FAL – File Abstraction Layer

<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>gallery</fieldname>
    </foreign_match_fields>
    <foreign_label>uid_local</foreign_label>
    <foreign_selector>uid_local</foreign_selector>
    <foreign_selector_fieldTcaOverride>
        <config>
            <appearance>
                <elementBrowserType>file</elementBrowserType>
                <elementBrowserAllowed>gif,jpg,jpeg,tif,tiff,bmp,pcx,tga,png,pdf,ai</elementBrowserAllowed>
            </appearance>
        </config>
    </foreign_selector_fieldTcaOverride>
    <foreign_types type="array">
        <numIndex index="2">
            <showitem>--palette--;LLL:EXT:lang/locallang_tca.xlf:sys_file_reference.imageoverlayPalette;imageoverlayPalette,--palette--;;filePalette</showitem>
        </numIndex>
    </foreign_types>

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

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

        <showPossibleLocalizationRecords>0</showPossibleLocalizationRecords>
        <showRemovedLocalizationRecords>0</showRemovedLocalizationRecords>
        <showSynchronizationLink>0</showSynchronizationLink>
        <useSortable>1</useSortable>
        <enabledControls>
            <info>1</info>
            <new>0</new>
            <dragdrop>0</dragdrop>
            <sort>1</sort>
            <hide>1</hide>
            <delete>1</delete>
            <localize>1</localize>
        </enabledControls>

        <createNewRelationLinkTitle>LLL:EXT:cms/locallang_ttc.xlf:images.addFileReference</createNewRelationLinkTitle>
    </appearance>

    <behaviour>
        <localizationMode>select</localizationMode>
        <localizeChildrenAtParentLocalization>1</localizeChildrenAtParentLocalization>
    </behaviour>
</config>

Template content (fluid)

<f:for each="{dce:fal(field:'gallery', contentObject:contentObject)}" as="fileReference" iteration="iterator" >
   <a href='<f:uri.image src="{fileReference.uid}" treatIdAsReference="1" />'  rel="gallery" title="" class="fancybox" >
       <f:image src="{fileReference.uid}" alt="" treatIdAsReference="1" class="icon" />
   </a>
</f:for>

The loop run through the complete FAL image list.

The if condition in the treatIdAsReference is recommended because FileCollections returns different types of objects depending of the type of the collection.

Folder based collections returns the file directly, static based collections a file reference. With this condition both cases are covered.

This was for FAL – File Abstraction Layer.

Now we look for simple upload image [ Systems file collections ]

If you have use file collections and you have defined a field in DCE where you can select images than you can access the file name in the Fluid template.

The location where the image is stored is also defined in the TCA, which is mostly something like uploads/pics.

TCA Configuration for simple file upload

<config>
    <type>group</type>
    <internal_type>db</internal_type>
    <allowed>sys_file_collection</allowed>
    <size>5</size>
    <minitems>0</minitems>
    <maxitems>999</maxitems>
    <show_thumbs>1</show_thumbs>
    <dce_load_schema>1</dce_load_schema>
</config>

Note : Since version 0.11.x of DCE you are. Just add a group field, set allowed tablename to “sys_file_collection” and add the dce_load_schema option.

In the Fluid template you can write following script:

<a href="{f:uri.image(src:'uploads/pics/{field.yourPicture}')}" >
    <f:image src="uploads/pics/{field.yourPicture}" alt="" maxWidth="150" maxHeight="150" />
</a>

I hope this will work for you 🙂

If you have any queries, please do not hesitate to contact me at Jainish Senjaliya