带fluid_styled_content和响应图像的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.2LTS中，我使用了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

基本上，您要做的就是创建一个库对象并将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

Answer 2

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