Typo3 7.6.2 LTS，带有流体样式内容和响应式图像（图片）

Question

我想用 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，但还没有响应式图像。

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

Answer 1

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

Answer 2

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

setup.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}
}

FluidTemplate.html

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

这也可能对您有所帮助：

How to implement the sourceCollection Responsive Image Rendering in typo3?

How to render responsive images in fluid templates (dce example) Raw