扩展名中的TYPO3 FAL图像

问题描述

我在这里阅读了很多有关TYPO3中FAL图像的文章。
我已经更新到TYPO3 v10,现在我需要使用FAL渲染图像。
我找不到从零开始工作的解决方案。
我在自定义的Fluid + Extbase扩展程序上使用它。

我得到的是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,svg,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>

我现在如何访问此图像?
如果我对其进行调试,则前端只会得到INT“ 1”。

我知道我需要一个DataProcessor,但是要放在哪里以及要准确放置什么?

我有一个Typoscript Conf,我可以把处理器放在这里吗?:

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
    }
}

我的控制器:也许我在这里丢失了一些东西?

<?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);
    }

    
}

解决方法

好吧,我不确定您的代码有什么问题。如您所说,调试返回int 1可能会显示该字段的状态。无论如何,请查看下面我经常用于TYPO3 10.x项目的配置。

<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,svg,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>

在您的前端模板(我假设您具有流畅的模板)中,可以使用以下语法来获取此信息。

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

上面的systext将返回资源文件的URL。您可以使用标准HTML img标签。

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

希望这会让您骑行!

,

最后我得到了我的图像。

我的Flexform没问题,我只需要在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;
    }
}
,

这没有用,我仍然收到错误消息,仍然是10.4.3版DCE元素,所有上传的图片均被阻止并显示错误后端管理

,

您说得对,您只需要添加一个数据处理器。您可以在 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
}

...这可能会作为数组返回,因此在流体中使用 foreach 将其保存为变量名:

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

...然后你可以在 HTML 中引用它

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

相关问答

错误1:Request method ‘DELETE‘ not supported 错误还原:...
错误1:启动docker镜像时报错:Error response from daemon:...
错误1:private field ‘xxx‘ is never assigned 按Alt...
报错如下,通过源不能下载,最后警告pip需升级版本 Requirem...