通过流体包裹内容元素

时间:2015-09-26 12:57:23

标签: typo3 fluid-layout fluid

我正在试验TYPO3和Fluid,目前我遇到了麻烦。这是我在TYPO3中创建的backendlayout

  

它由两个内容区域组成:" 左列"和   "的右列"

通过液体将它们带到前端外观是没有问题的。但后来我在"左栏"中创建了四个内容元素(文本和图像)。我想用引导包装器包装这些内容元素中的每一个,例如文字"col-md-8"img "col-md-4"

不幸的是,我没有找到任何提示或文档如何执行此操作。也许有人可以帮我解决这个问题并告诉我如何自定义我的内容元素的包装器。是否有可能通过Fluid完成?

1 个答案:

答案 0 :(得分:5)

后端布局用于将列映射到模板,但它们不允许您决定如何显示每个列。有几种解决方案......但上次我最喜欢的是扩展Grid Elements

它允许您为内容元素创建子容器,因此您可以添加Bootstrap网格布局的任意组合(即2 columns - 4-83 columns - 3-3-3等...)然后将它包装成引导类。

提到的2 columns - 4-8网格元素记录的示例:

标题: 2 columns: 4-8或您想要的任何内容;)

别名: 2_columns_4_8(必须是唯一的)

网格配置:

backend_layout {
    colCount = 2
    rowCount = 1
    rows {
        1 {
            columns {
                1 {
                    name = Left
                    colPos = 221
                }
                2 {
                    name = Right
                    colPos = 222
                }
            }
        }
    }
}

最后在你的TypoScript模板中添加如下的渲染定义:

tt_content.gridelements_pi1.20.10.setup {
    2_columns_4_8 < .default
    2_columns_4_8 {
        wrap = <div class="row">|</div>
        columns {
            221 < .default
            221.wrap = <div class="col-sm-4">|</div>

            222 < .default
            222.wrap = <div class="col-sm-8">|</div>
        }
    }
}

(示例中的观察TypoScript 别名以及 colPos 值的位置和方式

提示:不要在开始时浪费时间创建任何可能的列组合,而是在需要时创建一个 ad hoc ,通常只需要几个它们。

P.S。 TYPO3写成大写,总是!