TYPO3 Gridelements 使用 Fluidtemplate 渲染 FAL 图像
TYPO3 Gridelements render FAL Image using Fluidtemplate
我正在使用 TYPO3 8.7
和最新的扩展 gridelements
(8.2.3)。现在我想 show/render 我的 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}
上的调试器 returns 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)
编辑:图片
我前段时间就是这样做的,使用tt_content
的media
字段,而不是使用flexform。此解决方案假定
a) 您正在使用存储您的 TypoScript 和 Fluid 模板的 "frontend provider" 扩展 (EXT:yourext)
b) EXT:yourext 取决于 EXT:gridelements
c) 在此示例中,我的 gridelement 对象称为 twocolumnscontainer
1) TS 常量:使用 EXT:yourext 作为流体模板、布局、部分的替代路径
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 Setup 中,为内容网格定义模板 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) 定义流体模板(我删除了 类 所以你可以使用任何你想要的,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>
希望我没有忘记重要的步骤:)
由于 FAL 使用的是记录而不是图像的纯文本路径,因此您必须使用记录的 ID 来获取实际的图像文件。
因为我不是 100% 确定,在使用通常的 < f:image> 带或不带 "treatIdAsReference".
的 viewhelper
https://docs.typo3.org/typo3cms/ExtbaseGuide/Fluid/ViewHelper/Image.html
如果您只需要图像的路径而不是图像标签,您应该选择 < f:uri.image>。
https://docs.typo3.org/typo3cms/ExtbaseGuide/Fluid/ViewHelper/Uri/Image.html
这应该适合你:
<f:uri.image src="{data.flexform_backgroundimage}" treatIdAsReference="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>
我会得到一个错误You must either specify a string src or a File object.
现在我用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
扩展的 here's the view helper reference。谢谢大家的帮助!
我正在使用 TYPO3 8.7
和最新的扩展 gridelements
(8.2.3)。现在我想 show/render 我的 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}
上的调试器 returns 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)
编辑:图片
我前段时间就是这样做的,使用tt_content
的media
字段,而不是使用flexform。此解决方案假定
a) 您正在使用存储您的 TypoScript 和 Fluid 模板的 "frontend provider" 扩展 (EXT:yourext)
b) EXT:yourext 取决于 EXT:gridelements
c) 在此示例中,我的 gridelement 对象称为 twocolumnscontainer
1) TS 常量:使用 EXT:yourext 作为流体模板、布局、部分的替代路径
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 Setup 中,为内容网格定义模板 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) 定义流体模板(我删除了 类 所以你可以使用任何你想要的,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>
希望我没有忘记重要的步骤:)
由于 FAL 使用的是记录而不是图像的纯文本路径,因此您必须使用记录的 ID 来获取实际的图像文件。
因为我不是 100% 确定,在使用通常的 < f:image> 带或不带 "treatIdAsReference".
的 viewhelperhttps://docs.typo3.org/typo3cms/ExtbaseGuide/Fluid/ViewHelper/Image.html
如果您只需要图像的路径而不是图像标签,您应该选择 < f:uri.image>。
https://docs.typo3.org/typo3cms/ExtbaseGuide/Fluid/ViewHelper/Uri/Image.html
这应该适合你:
<f:uri.image src="{data.flexform_backgroundimage}" treatIdAsReference="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>
我会得到一个错误You must either specify a string src or a File object.
现在我用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
扩展的 here's the view helper reference。谢谢大家的帮助!