TYPO3 Gridelements使用Fluidtemplate呈现FAL图像

Question

我是使用TYPO3 8.7和最新的gridelements扩展(8.2.3)。现在我想在我的FLUIDTEMPLATE中显示/渲染一个图片...但我不知道如何做？

以下是我的TypoScript代码:

tt_content {
    gridelements_pi1 = COA
    gridelements_pi1 {
        20 {
            10 {
                setup {
                    SectionColoured < lib.gridelements.defaultGridSetup
                    SectionColoured {
                        cObject = FLUIDTEMPLATE
                        cObject {
                            file = EXT:myext/.../SectionColoured.html
                        }
                    }
                }
            }
        }
    }
}

现在，我通过flexforms上传图像（例如用于背景图片），如下所示：

<backgroundimage type="array">
                        <TCEforms type="array">
                            <label>LLL:EXT:autefa/Resources/Private/Language/backend.xlf:gridelements.SectionColoured.flexforms.backgroundimage</label>
                            <config type="array">
                                <type>inline</type>
                                <maxitems>1</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>
                    </backgroundimage>

目前为止还可以。我该如何在我的FLUIDTEMPLATE中使用这张图片？调试器返回{data.flexform_backgroundimage}的值为12？！

<f:debug>{data.flexform_backgroundimage}</f:debug>
<section class="main-content {data.flexform_farbe}">
    <article>
        <f:format.raw>{data.tx_gridelements_view_columns.101}</f:format.raw>
    </article>
</section>

调试{data}.. 感谢您的帮助！

pi_flexform => array(1 item)
      data => array(1 item)
         general => array(1 item)
            lDEF => array(2 items)
               farbe => array(1 item)
               backgroundimage => array(1 item)
                  vDEF => '12' (2 chars)

Edit: image

- user2310852

Answer 1

很有趣。如果我尝试使用TYPO3 Fluid ViewHelper：

<section style="background-image:url({f:uri.image(src: '{data.flexform_backgroundimage}', treatIdAsReference: 1)})">
    <article>
        <f:format.raw>{data.tx_gridelements_view_columns.100}</f:format.raw>
    </article>
</section>

我会收到一个错误 您必须指定字符串src或文件对象。

现在我使用 vhs：

{namespace v=FluidTYPO3\Vhs\ViewHelpers}

<section style="background-image:url({v:uri.image(src: '{data.flexform_backgroundimage}', treatIdAsReference: 1)})">
    <article>
        <f:format.raw>{data.tx_gridelements_view_columns.100}</f:format.raw>
    </article>
</section>

一切都正常...感谢大家的帮助！这里是vhs扩展的视图助手参考文档

- user2310852

Answer 2

由于FAL使用记录而不是纯文本路径来处理图像，您必须使用记录的ID来获取实际的图像文件。

由于我不确定12是否是用于该特定图像的sys_file_reference记录或sys_file记录的ID，在使用通常的<f:image>视图助手之前，请检查。

https://docs.typo3.org/typo3cms/ExtbaseGuide/Fluid/ViewHelper/Image.html

如果您只需要图像路径而不是图像标记，您应该选择使用< f:uri.image>。

https://docs.typo3.org/typo3cms/ExtbaseGuide/Fluid/ViewHelper/Uri/Image.html

- Jo Hasenau

---

12是图像的uid，我已经编辑了我的初始帖子。<f:uri.image>有一个错误.. 使用视图助手<f:image>时我什么也看不到，带或不带treatIdAsReference...?! 错误信息是You must either specify a string src or a File object。 - user2310852

当悬停在内联记录上显示ID时，这不是sys_file的ID，而是引用的ID，因此应该使用treatIdAsReference。 - Jo Hasenau

Answer 3

这是我一段时间以前的做法，使用tt_content的media字段而不是使用flexform。这个解决方案假设：

a) 您正在使用一个“前端提供程序”扩展（EXT：yourext），该扩展存储您的TypoScript和Fluid模板

b) EXT：yourext 依赖于 EXT：gridelements

c) 在此示例中，我的gridelement对象称为twocolumnscontainer

1）TS常量：使用EXT：yourext作为Fluid模板、布局、部分的替代路径

styles.templates.templateRootPath = EXT:yourext/Resources/Private/Templates/ContentElements/ 
styles.templates.partialRootPath = EXT:yourext/Resources/Private/Partials/ContentElements/
styles.templates.layoutRootPath = EXT:yourext/Resources/Private/Layouts/ContentElements/

2) 在 TS 设置中，为内容网格定义模板 cObject

lib.gridelements.defaultGridSetup.cObject =<  lib.contentElement

tt_content.gridelements_pi1.20.10.setup.twocolumnscontainer < lib.gridelements.defaultGridSetup
tt_content.gridelements_pi1.20.10.setup.twocolumnscontainer {
  cObject.templateName = GridElementTwoColumns
    cObject.dataProcessing {
        10 = TYPO3\CMS\Frontend\DataProcessing\FilesProcessor
        10 {
            references.fieldName = media
            as = backgroundimage 
        }

    }
}

3) 在 TS 配置中：

tx_gridelements.setup.twocolumnscontainer {
  title = Two columns element with background image
  description = whatever
  config{
    colCount = 2
    rowCount = 1
    rows {
        1 {
            columns {
                1 {
                    name = column 1
                    colPos = 100
                }
                2 {
                    name = column 2
                    colPos = 101
                }
            }
        }
    }
  }  
}

4) 扩展名:yourext/TCA/Overrides/tt_content_element_gridelement.php

<?php
defined('TYPO3_MODE') || die();

call_user_func(function()
{
    /**
     * Limit the number of images in "media" for gridelements contents
     */
    $GLOBALS['TCA']['tt_content']['types']['gridelements_pi1']['columnsOverrides']['media']['config']['maxitems']=1;

});

5) 定义 Fluid 模板（我删除了类，所以您可以使用任何您想要的东西，如 Bootstrap、Foundation...）： EXT:yourext/Resources/Private/Templates/ContentElements/GridElementTwoColumns.html

<f:layout name="Default"/>
<f:section name="Main">
<f:if condition="{backgroundimage.0}">
{f:uri.image(image:backgroundimage.0)}
</f:if>
    <div class="">
        <div class="">
            {data.tx_gridelements_view_column_100-> f:format.raw()}
        </div>
        <div class="">
            {data.tx_gridelements_view_column_101-> f:format.raw()}
        </div>          
    </div>
</f:section>

希望我没有忘记重要的步骤 :)

- Riccardo De Contardi

---

嗨Riccardo。看起来不错，但是我已经在tt_content中使用了media字段作为标题图片。我不能再将其用于gridelement的背景图片。所以也许我会使用你的示例，尝试改变我的设置。谢谢你的回答...但是它必须能够与flexform-Image一起工作吗？ - user2310852

@user2310852，请查看我的另一个答案。 - Riccardo De Contardi

Answer 4

这个应该适用于你：

<f:uri.image src="{data.flexform_backgroundimage}" treatIdAsReference="1"/>

- Riccardo De Contardi

---

嗨，Riccardo。这个代码抛出了一个错误：“您必须指定一个字符串src或一个文件对象。” - user2310852

嗯，这很奇怪，因为对我来说它运行得很好...你是在查看带有图像集的网格元素吗？ - Riccardo De Contardi

由于12将是一个可以被视为引用的ID字符串，您应该确保它能正常工作。那么，当您用普通的12替换变量时会发生什么？ - Jo Hasenau

谢谢你的帮助。使用<f:uri.image src="12" treatIdAsReference="1"/> 我将得到我的图片路径。{data.flexform_baclgroundimage}有错误吗？！？ - user2310852

你能否对那个特定的字段进行调试输出，并将其添加到描述中？ - Jo Hasenau

嗨Jo，你是指这个代码：<f:debug>{data.flexform_backgroundimage}</f:debug>，它返回的结果是 12' (2 chars) 吗？你可以看到上面的 data-debug（见问题）。 - user2310852