TypoScript:当没有IMG_RESOURCE时，更改标题字段的换行

Question

我有一个jumbotron，里面有一个背景图像和一个标题。背景图像来自网站属性，标题来自特定的后端布局列。

当前状态
jumbotron与背景图像和标题完美配合。但现在我想根据图片是否在网站属性中来更改标题的css类。

结果应该是什么样子(伪代码(

if there is an image:
<div class="jumbotron" style="background-image: url(...)
<h1 class="header-type1">My header with standard styling</h1>
</div>
else:
<h1 class="header-type2">My header with different styling</h1>

这是我的打字代码

lib.jumbo < lib.dynamicContent
lib.jumbo {
20.renderObj = COA
20.renderObj {
5 = IMG_RESOURCE
5 {
file {
import = uploads/media/
import.data = levelmedia:-1
treatIdAsReference = 1
import.listNum = 0
width = 1022
height = 472
}
stdWrap {
wrap = <div class="jumbotron" style="background-image: url(|);">
required = 1
}
}
10 = TEXT
10 {
stdWrap {
field = header
required = 1

# if there is one image in the site properties use this wrap
wrap = <h1 class="header-type1">|</h1>

# if there is no image:
wrap < h1 class="header-type2">|</h1>
}
}
# this one should only be displayed too, if there is an image
90 = TEXT
90.value = </div>
}
}

lib.DynamicContent来自引导程序包

Answer 1

这里我们有一个打字脚本解决方案有点复杂的例子。但与此同时，我们还有其他选择：

为什么不使用FLUID进行渲染

lib.jumbo < lib.dynamicContent
lib.jumbo {
20.renderObj = FLUIDTEMPLATE
20.renderObj {
template = Header
templateRootPaths.0 = EXT:my_site_ext/Resources/Private/page/Templates
variables {
header = TEXT
header.field = header
jumboImage = IMG_RESOURCE
jumboImage {
file {
import = uploads/media/
import.data = levelmedia:-1
treatIdAsReference = 1
import.listNum = 0
width = 1022
height = 472
}
}
}
}

以及在参考流体模板文件中：

<f:if condition="{jumboImage}">
<f:then>
<div class="jumbotron" style="background-image: url({jumboImage})">
<h1 class="header-type1">{header->f:format.raw()}</h1>
</div>
</f:if>
<f:else>
<h1 class="header-type2">{header->f:format.raw()}</h1>
</f:else>
</f:if>

注意：
图像生成可以优化

---

我想您根本不需要这个打字脚本，因为您可能使用类似<f:cObject typoscriptObjectPath="lib.jumbo" arguments="..." />的lib.jumbo

在那个位置，您可以使用一个部分或只是一个部分来调用{f:uri.image image="..."}视图助手。