30. 05. 2016, 17:12

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:

  1. tt_content.image.20.1.layout.picturefill {
  2.  
  3. element (
  4. <picture class="first-match">
  5. <!--[if IE 9]><!!=:><![endif]-->
  6. ###SOURCECOLLECTION###
  7. <img srcset="###SRC###" ###PARAMS### ###ALTPARAMS######SELFCLOSINGTAGSLASH###>
  8. <!--[if IE 9]></video><![endif]-->
  9. <noscript>
  10. <img src="###SRC###" ###ALTPARAMS######SELFCLOSINGTAGSLASH###>
  11. </noscript>
  12. </picture>
  13. )
  14. source = <source srcset="###SRC###" media="###MEDIAQUERY###"></source>
  15. }
  16. tt_content.image.20.maxW >
  17. tt_content.image.20.maxWInText >
  18. tt_content.image.20.maxWInText = 375
  19. tt_content.image.20.maxW = 500
  20. tt_content.image.20.1.sourceCollection {
  21. small >
  22. smallRetina >
  23. small {
  24. width = 640
  25. maxW = 640
  26. mediaQuery = (min-width: 100px) AND (max-width: 640px)
  27. srcsetCandidate = 640w
  28. dataKey = small
  29. }
  30. middle {
  31. width = 992
  32. maxW = 992
  33. mediaQuery = (min-width: 641px) AND (max-width: 992px)
  34. srcsetCandidate = 992w
  35. dataKey = middle
  36. }
  37. large {
  38. width = 1280
  39. maxW = 1280
  40. srcsetCandidate = 1280w
  41. mediaQuery = (min-width: 993px) AND (max-width: 4000px)
  42. dataKey = large
  43. }
  44. # extralarge_x2.maxW = 100px
  45. # extralarge_x2.mediaQuery = only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait)
  46. }