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

基本上你要做的就是创建一个 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

Answer 2

在fluid_styled_content中，不再有独立的图像元素，只有textmedia-element是＆＃34; text＆＃34;，＆＃34; text with image＆＃34;和＆＃34;图像＆＃34;。

Typo3 7.6.2 LTS带有fluid_styled_content和响应式图像（图片）

2 个答案: