1

我想用 Typo3 7.6.2 LTS 和 fluid_styled 内容渲染响应式图像，如下所示：

<picture>
 <source srcset="path_to_small" media="(min-width: 768px) AND (max-width: 991px)">
 <source srcset="path_to_big" media="(min-width: 1200px)">
 <source srcset="path_to_middle" media="(min-width: 992px) AND (max-width: 1199px)">
 <img src="path_to_picture">
</picture>

对于 Typo3 6.2 LTS，我使用了 css_styled_content 并为此添加了以下 Typoscript：

tt_content.image.20.1.sourceCollection {
 large.mediaQuery = (min-width: 1200px)

 middle.maxW = 1200px
 middle.mediaQuery = (min-width: 992px) AND (max-width: 1199px)

 small.maxW = 992px
 small.mediaQuery = (min-width: 768px) AND (max-width: 991px)
}

但这不适用于最新的 Typo3 版本。

我想编辑fluid_styled_content 模板并使用viewhelper，但还没有响应式图像。

还有另一种可能解决这个问题（无需额外扩展）？

4

2 回答 2

1

基本上你所要做的就是创建一个lib 对象并将 sourceCollection 分配给它。然后你就可以在你的流体模板中调用它。

安装程序.ts

lib.responsiveImage = IMAGE
lib.responsiveImage {
    file {
        import.current = 1
        treatIdAsReference = 1
    }
    sourceCollection < tt_content.image.20.1.sourceCollection
    layout < tt_content.image.20.1.layout
    layoutKey = {$styles.content.imgtext.layoutKey}
}

流体模板.html

<f:cObject typoscriptObjectPath="lib.responsiveImage" data="{image.uid}"></f:cObject>


这也可能对您有所帮助：

如何在typo3中实现sourceCollection响应式图像渲染？

如何在流体模板中渲染响应式图像（dce 示例）Raw

于 2015-12-31T00:34:09.723 回答
-1

在 fluid_styled_content 中不再有独立的图像元素，只有文本媒体元素，即“文本”、“带图像的文本”和“图像”。

于 2016-01-11T20:57:38.257 回答