时间戳

首页 > 解决方案 > TypoScript：没有 IMG_RESOURCE 时更改标题字段的换行

typo3 - TypoScript：没有 IMG_RESOURCE 时更改标题字段的换行

问题描述

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

当前状态
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来自引导包

标签： typo3typoscripttypo3-10.x

解决方案

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

为什么不使用 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>

注意：
图像生成可以优化

我假设你甚至根本不需要这个打字稿，因为你可能会使用lib.jumbo类似的<f:cObject typoscriptObjectPath="lib.jumbo" arguments="..." />

在那个地方，您可以使用部分或仅部分来调用{f:uri.image image="..."}viewhelper。

推荐阅读