TYPO3 FAL images in extension

Question

I've read a lot of posts here about FAL images in TYPO3.
I've updated to TYPO3 v10 and now I need to render my Images with FAL.
I can't find a solution to get it from zero to work.
I use this at a custom Fluid+Extbase extension.

What I've got is the FlexForm:

                <settings.image>
                    <TCEforms>
                        <label>Headerbild</label>
                        <config>
                            <type>inline</type>
                            <maxitems>1</maxitems>
                            <foreign_table>sys_file_reference</foreign_table>
                            <foreign_table_field>tablenames</foreign_table_field>
                            <foreign_label>uid_local</foreign_label>
                            <foreign_sortby>sorting_foreign</foreign_sortby>
                            <foreign_field>uid_foreign</foreign_field>
                            <foreign_selector>uid_local</foreign_selector>
                            <foreign_selector_fieldTcaOverride>
                                <config>
                                    <appearance>
                                        <elementBrowserType>file</elementBrowserType>
                                        <elementBrowserAllowed>gif,jpg,jpeg,png,svg</elementBrowserAllowed>
                                    </appearance>
                                </config>
                            </foreign_selector_fieldTcaOverride>
                            <foreign_types type="array">
                                <numIndex index="0">
                                    <showitem>--palette--;LLL:EXT:lang/locallang_tca.xlf:sys_file_reference.imageoverlayPalette;imageoverlayPalette,--palette--;;filePalette</showitem>
                                </numIndex>
                                <numIndex index="2">
                                    <showitem>--palette--;LLL:EXT:lang/locallang_tca.xlf:sys_file_reference.imageoverlayPalette;imageoverlayPalette,--palette--;;filePalette</showitem>
                                </numIndex>
                            </foreign_types>
                            <foreign_match_fields>
                                <fieldname>image</fieldname>
                            </foreign_match_fields>
                            <appearance type="array">
                                <newRecordLinkAddTitle>1</newRecordLinkAddTitle>
                                <headerThumbnail>
                                    <field>uid_local</field>
                                    <height>64</height>
                                    <width>64</width>
                                </headerThumbnail>
                                <enabledControls>
                                    <info>1</info>
                                    <new>0</new>
                                    <dragdrop>0</dragdrop>
                                    <sort>1</sort>
                                    <hide>0</hide>
                                    <delete>1</delete>
                                    <localize>1</localize>
                                </enabledControls>
                                <createNewRelationLinkTitle>LLL:EXT:frontend/Resources/Private/Language/locallang_ttc.xlf:images.addFileReference</createNewRelationLinkTitle>
                            </appearance>
                            <behaviour>
                                <localizationMode>select</localizationMode>
                                <localizeChildrenAtParentLocalization>1</localizeChildrenAtParentLocalization>
                            </behaviour>
                            <overrideChildTca>
                                <columns type="array">
                                    <uid_local type="array">
                                        <config type="array">
                                            <appearance type="array">
                                                <elementBrowserType>file</elementBrowserType>
                                                <elementBrowserAllowed>jpg,png,svg,jpeg,gif</elementBrowserAllowed>
                                            </appearance>
                                        </config>
                                    </uid_local>
                                </columns>
                                <types type="array">
                                    <numIndex index="2">
                                        <showitem>--palette--;LLL:EXT:lang/locallang_tca.xlf:sys_file_reference.imageoverlayPalette;imageoverlayPalette,--palette--;;filePalette</showitem>
                                    </numIndex>
                                </types>
                            </overrideChildTca>
                        </config>
                    </TCEforms>
                </settings.image>

How can i access this images now?
If I debug it, I just get INT "1" at the frontend.

I know I need a DataProcessor, but where to put it and what to put exactly?

I got a Typoscript Conf, can I put the Processor here?:

page.includeCSS.filedsheader = EXT:dsheader/Resources/Public/Css/dsheader.css
page.includeJSFooter.filedsheader = EXT:dsheader/Resources/Public/Js/dsheader.js

plugin.tx_dsheader {
    view {
        templateRootPath = {$plugin.tx_dsheader.view.templateRootPath}
        partialRootPath = {$plugin.tx_dsheader.view.partialRootPath}
        layoutRootPath = {$plugin.tx_dsheader.view.layoutRootPath}
    }
    persistence {
        storagePid = {$plugin.tx_dsheader.persistence.storagePid}
    }
    features {
        # uncomment the following line to enable the new Property Mapper.
        # rewrittenPropertyMapper = 1
    }
}

My Controller: Maybe I'm missing something here?

<?php
namespace Alroma\Dsheader\Controller;
/**
 *
 * @category    Controller
 */
class ContentController extends \TYPO3\CMS\Extbase\Mvc\Controller\ActionController {
    
    /**
     * @var \TYPO3\CMS\Core\Resource\FileRepository
     * @TYPO3\CMS\Extbase\Annotation\Inject
     */
    protected $fileRepository;
    
    /**
     * @return void
     */
    public function dsheaderAction() {
        
        $data = $this->configurationManager->getContentObject()->data;
        $this->view->assign('data', $data);
    }

    
}

Answer 1

Well, I am not sure what wrong with your code. As you said your debug return int 1 this will probably show the status of the field. Anyway, Check out below configuration I frequently use for my TYPO3 10.x projects.

<bgImg>
    <TCEforms>
        <label>Select Image</label>
        <config>
            <type>inline</type>
            <maxitems>1</maxitems>
            <foreign_table>sys_file_reference</foreign_table>
            <foreign_table_field>tablenames</foreign_table_field>
            <foreign_label>uid_local</foreign_label>
            <foreign_sortby>sorting_foreign</foreign_sortby>
            <foreign_field>uid_foreign</foreign_field>
            <foreign_selector>uid_local</foreign_selector>
            <foreign_selector_fieldTcaOverride>
                <config>
                    <appearance>
                        <elementBrowserType>file</elementBrowserType>
                        <elementBrowserAllowed>gif,jpg,jpeg,png,svg</elementBrowserAllowed>
                    </appearance>
                </config>
            </foreign_selector_fieldTcaOverride>
            <foreign_types type="array">
                <numIndex index="0">
                    <showitem>--palette--;LLL:EXT:lang/locallang_tca.xlf:sys_file_reference.imageoverlayPalette;imageoverlayPalette,--palette--;;filePalette</showitem>
                </numIndex>
                <numIndex index="2">
                    <showitem>--palette--;LLL:EXT:lang/locallang_tca.xlf:sys_file_reference.imageoverlayPalette;imageoverlayPalette,--palette--;;filePalette</showitem>
                </numIndex>
            </foreign_types>
            <foreign_match_fields>
                <fieldname>bgImg</fieldname>
            </foreign_match_fields>
            <appearance type="array">
                <newRecordLinkAddTitle>1</newRecordLinkAddTitle>
                <headerThumbnail>
                    <field>uid_local</field>
                    <height>64</height>
                    <width>64</width>
                </headerThumbnail>
                <enabledControls>
                    <info>1</info>
                    <new>0</new>
                    <dragdrop>0</dragdrop>
                    <sort>1</sort>
                    <hide>0</hide>
                    <delete>1</delete>
                    <localize>1</localize>
                </enabledControls>
                <createNewRelationLinkTitle>LLL:EXT:frontend/Resources/Private/Language/locallang_ttc.xlf:images.addFileReference</createNewRelationLinkTitle>
            </appearance>
            <behaviour>
                <localizationMode>select</localizationMode>
                <localizeChildrenAtParentLocalization>1</localizeChildrenAtParentLocalization>
            </behaviour>
            <overrideChildTca>
                <columns type="array">
                    <uid_local type="array">
                        <config type="array">
                            <appearance type="array">
                                <elementBrowserType>file</elementBrowserType>
                                <elementBrowserAllowed>jpg,png,svg,jpeg,gif</elementBrowserAllowed>
                            </appearance>
                        </config>
                    </uid_local>
                </columns>
                <types type="array">
                    <numIndex index="2">
                        <showitem>--palette--;LLL:EXT:lang/locallang_tca.xlf:sys_file_reference.imageoverlayPalette;imageoverlayPalette,--palette--;;filePalette</showitem>
                    </numIndex>
                </types>
            </overrideChildTca>
        </config>
    </TCEforms>
</bgImg>

In your frontend template (I assume you have fluid templating), you can get this with below syntax.

{f:uri.image(src:'{data.flexform_bgImg}', treatIdAsReference:'1')}

Above systext will return URL for the resource file. you can either use with standerd HTML img tag.

<img src="{f:uri.image(src:'{data.flexform_bgImg}', treatIdAsReference:'1')}" />

Hope this will get you ride off!

Answer 2

Finally I got my Images rendered.

My Flexform was okay, I just needed to get the File Reference at my Controller:

<?php
namespace Alroma\Dsheader\Controller;
/**
 *
 * @category    Controller
 */
class ContentController extends \TYPO3\CMS\Extbase\Mvc\Controller\ActionController {
    
    /**
     * @var TYPO3\CMS\Core\Resource\FileRepository
     * @TYPO3\CMS\Extbase\Annotation\Inject
     */
    protected $fileRepository;

    /**
     * @return void
     */
    public function dsheaderAction() {

    $this->contentObj = $this->configurationManager->getContentObject();
        $images=$this->getFileReferences($this->contentObj->data['uid']);
        $this->view->assign('images', $images);
        
        $data = $this->configurationManager->getContentObject()->data;
        $this->view->assign('data', $data);
    }

    


    protected function getFileReferences($tt_content) {
            $uid = $tt_content; // content element uid
            $fileRepository = \TYPO3\CMS\Core\Utility\GeneralUtility::makeInstance('TYPO3\\CMS\\Core\\Resource\\FileRepository');
            $fileObjects = $fileRepository->findByRelation('tt_content', 'image', $uid);
            // get Imageobject information
            $files = array();
     
     
            foreach ($fileObjects as $key => $value) {
              $files[$key]['reference'] = $value->getReferenceProperties();
              $files[$key]['original'] = $value->getOriginalFile()->getProperties();
            }
     
     
            return $files;
    }
}

Answer 3

It's not useful, I get an error still version 10.4.3 DCE elements all upload images blocked and showing error backend admin

Answer 4

You are right, you just needed to add a data processor. You can do this in setup.ts: ...

dataProcessing.20 = TYPO3\CMS\Frontend\DataProcessing\FilesProcessor
dataProcessing.20 {
    if.isTrue.field = settings.image
    references {
        fieldName = settings.image
        table = tt_content
    }
    as = ImageNameHere
}

...this will probably return as an array, so in fluid use a foreach to save it to a variable name:

    <f:for each="{ImageNameHere}" as="file" iteration="iterator">
      <f:variable name="fileurl"><f:uri.image image="{file}"/></f:variable>
    </f:for>

...and then you can reference it in HTML

    <div style="background-image:url({fileurl});"></div>