我认为使用 TypoScript 可以做到这一点，但我会在这里发布我的解决方案，它基于 Fluid。
该解决方案基于以下假设：
1）您已经创建了自己的扩展，充当“前端配置提供者”；我会称它为“你的下一个”。
如果您需要有关此主题的帮助，请加入 TYPO3 Slack 频道 ( https://typo3.slack.com/ ) 并寻求帮助。
2）背景图像将存储在媒体字段中，这与您在gridelements的外观选项卡中看到的“文件”调色板有关
3) EXT:yourext 依赖于 gridelements。
TS 配置
#Define the element with 2 columns:
tx_gridelements.setup.twocolumnscontainer {
title = 2 col container
description = whatever description you want
iconIdentifier =
config{
colCount = 2
rowCount = 1
rows {
1 {
columns {
1 {
name = column 1
colPos = 100
}
2 {
name = column 2
colPos = 101
}
}
}
}
}
}
TypoScript 常量：
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/
排版模板：
# the default gridelement object will be a reference to the default fluidtemplate object shipped with TYPO3 8
lib.gridelements.defaultGridSetup.cObject =< lib.contentElement
#define the element with 2 colums as copy of the default object
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
}
}
}
EXT：yourext/Configuration/TCA/Overrides/tt_content.php：
<?php
defined('TYPO3_MODE') or die();
//prevent defining global variables
call_user_func(function () {
// only allow 1 image
$GLOBALS['TCA']['tt_content']['types']['gridelements_pi1']['columnsOverrides']['media']['config']['maxitems']=1;
});
EXT:yourext/Resources/Private/Templates/ContentElements/GridElementTwoColumns.html（使用自己的html代码，这里我只是以Bootstrap标准为例）
<f:layout name="Default"/>
<f:section name="Main">
<f:if condition="{backgroundimage.0}">
{f:uri.image(image:backgroundimage.0)}
</f:if>
<div class="row">
<div class="col-sm-6">
{data.tx_gridelements_view_column_100-> f:format.raw()}
</div>
<div class="col-sm-6">
{data.tx_gridelements_view_column_101-> f:format.raw()}
</div>
</div>
</f:section>
我认为这应该足够了。
最后说明
使用媒体字段，您将无法使用“裁剪工具”；为此，您必须将图像存储在tt_content 数据库表的图像字段中；这意味着您必须更改网格元素的 TCA 才能显示“图像”选项卡。