TYPO3 7.6.2 LTS с fluid_styled_content и отзывчивые изображения (изображения)

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 и присвоить ему исходный набор. Затем вы сможете позвонить в свой шаблон Fluid.

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-элемент, который является «текст», «текст с изображением» и «образ».