FAL image field in extension flexform

Question

Is it possible to create a flexform FAL image field like in the normal tt_content element ? I want to implement the functionality displayed in the following screen in an extension flexform field.

I've created a flexform element, but it has a problem when translating default content element records. When I translate default content element, the images are not copied to translated element.

So I need to implement flexform FAL image field with out bug in translation.

Answer 1

Hope this helps - I developed an imageslider using flexforms and FAL. Here's the code:

Flexform Configuration (just for the images-field)

<settings.sliderImages>
        <TCEforms>
            <label>LLL:EXT:bwrk_slider/Resources/Private/Language/locallang_db.xlf:imageslider.flex.general.sliderImages</label>
            <config>
                <type>inline</type>
                <maxitems>99</maxitems>
                <foreign_table>sys_file_reference</foreign_table>
                <!--<foreign_field>uid_foreign</foreign_field>-->
                <foreign_table_field>tablenames</foreign_table_field>
                <foreign_label>uid_local</foreign_label>
                <foreign_sortby>sorting_foreign</foreign_sortby>
                <foreign_selector>uid_local</foreign_selector>
                <foreign_selector_fieldTcaOverride type="array">
                    <config>
                        <appearance>
                            <elementBrowserType>file</elementBrowserType>
                            <elementBrowserAllowed>jpg,png</elementBrowserAllowed>
                        </appearance>
                    </config>
                </foreign_selector_fieldTcaOverride>
                <foreign_match_fields type="array">
                    <fieldname>image</fieldname>
                </foreign_match_fields>
                <appearance type="array">
                    <newRecordLinkAddTitle>1</newRecordLinkAddTitle>
                    <headerThumbnail>
                        <field>uid_local</field>
                        <height>64</height>
                        <width>64</width>
                    </headerThumbnail>
                </appearance>
            </config>
        </TCEforms>
    </settings.sliderImages>

Controller of my Extension

        $resourceFactory = \TYPO3\CMS\Core\Utility\GeneralUtility::makeInstance('TYPO3\\CMS\\Core\\Resource\\ResourceFactory');
        $sliderItems = array();
        $sliderItemUids = $this->settings['sliderImages'];
        $sliderItemUids = explode(',', $sliderItemUids);

        if(!empty($sliderItemUids)){
            $arraySize = sizeof($sliderItemUids);
            for($i = 0; $i < $arraySize; $i++){

                $itemUid = $sliderItemUids[$i];

                $fileReference = $resourceFactory->getFileReferenceObject($itemUid);
                $fileArray = $fileReference->getProperties();
                array_push($sliderItems, $fileArray);
            }
        }

        // debug($this->settings['sliderImages']);
        $this->view->assign('sliderItems', $sliderItems);

Fluid-Template

<f:for each="{sliderItems}" as="item">
    <div class="slider-item">
        <div class="slider-item-img">
            <f:image src="{item.uid}" alt="..." treatIdAsReference="TRUE" />
        </div>
        <div class="slider-item-text"></div>
    </div>
</f:for>

Answer 2

Works great, but if you do not add an image in the plugin, you will end in an exception. So i tweaked the code a bit:

$resourceFactory = \TYPO3\CMS\Core\Utility\GeneralUtility::makeInstance('TYPO3\\CMS\\Core\\Resource\\ResourceFactory');
    $sliderItems = array();
    $sliderItemUids = $this->settings['sliderImages'];


    if(!empty($sliderItemUids)){
        $sliderItemUids = explode(',', $sliderItemUids);
        $arraySize = sizeof($sliderItemUids);
        for($i = 0; $i < $arraySize; $i++){

            $itemUid = $sliderItemUids[$i];

            $fileReference = $resourceFactory->getFileReferenceObject($itemUid);
            $fileArray = $fileReference->getProperties();
            array_push($sliderItems, $fileArray);
        }
        // debug($this->settings['sliderImages']);
        $this->view->assign('sliderItems', $sliderItems);
    }