Hallo, bei meiner Typo3 Installation funktionieren bereits responsive Images mit dem picturefill.
Wie kann ich das jedoch bei meinem DCE verwenden, gibt es hier einen passenden Viewhelper?
Im TS steht bislang folgendes:
tt_content.image.20.1.layout.picturefill {
element (
<picture class="first-match">
<!--[if IE 9]><video style="display: none;"><![endif]-->
###SOURCECOLLECTION###
<img srcset="###SRC###" ###PARAMS### ###ALTPARAMS######SELFCLOSINGTAGSLASH###>
<!--[if IE 9]></video><![endif]-->
<noscript>
<img src="###SRC###" ###ALTPARAMS######SELFCLOSINGTAGSLASH###>
</noscript>
</picture>
)
source = <source srcset="###SRC###" media="###MEDIAQUERY###"></source>
}
tt_content.image.20.maxW >
tt_content.image.20.maxWInText >
tt_content.image.20.maxWInText = 375
tt_content.image.20.maxW = 500
tt_content.image.20.1.sourceCollection {
small >
smallRetina >
small {
width = 640
maxW = 640
mediaQuery = (min-width: 100px) AND (max-width: 640px)
srcsetCandidate = 640w
dataKey = small
}
middle {
width = 992
maxW = 992
mediaQuery = (min-width: 641px) AND (max-width: 992px)
srcsetCandidate = 992w
dataKey = middle
}
large {
width = 1280
maxW = 1280
srcsetCandidate = 1280w
mediaQuery = (min-width: 993px) AND (max-width: 4000px)
dataKey = large
}
# extralarge_x2.maxW = 100px
# extralarge_x2.mediaQuery = only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait)
}