TypoScript：没有IMG_RESOURCE时更改标头字段的换行

问题描述

我有一个带有背景图片和标头的超大屏幕。 背景图片来自网站属性，标题来自特定的后端布局列。

当前状态
巨型机与背景图像和页眉完美配合。但是现在我想根据图像是否在站点属性中来更改标题的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来自bootstrap package

解决方法

在这种情况下，打字稿解决方案会有些复杂。但与此同时，我们还有其他选择：

为什么不使用FLUID进行渲染？

Foo

以及在引用的流体模板文件中：

Bar

注意：
图像生成可以优化

---

我认为您甚至根本不需要此打字稿，因为您可能像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>

在那个地方，您可以使用部分或仅一部分来调用lib.jumbo viewhelper。