[TYPO3-german] Frage zu Responsive Images in Typo3 8.7.1 LTS

[Wolfertz, Sebastian]

Hallo Liste,

ich bastel grade an Code der mir ein voll adaptives <picture>-Tag ausgibt. Derzeit sieht die Ausgabe wie folgt aus:

<picture>
<source srcset="https://example.com/fileadmin/_processed_/a/2/csm_panel_0aa85320d6.jpg 1x" media="(max-width: 320px)" >
<source srcset="https://example.com/fileadmin/_processed_/a/2/csm_panel_cfeff4a8e6.jpg 2x" media="(max-width: 320px)" >
<source srcset="https://example.com/fileadmin/_processed_/a/2/csm_panel_395536288c.jpg 1x" media="(max-width: 720px)" >
<source srcset="https://example.com/fileadmin/_processed_/a/2/csm_panel_07158a71f8.jpg 2x" media="(max-width: 720px)" >
<img src="https://example.com/fileadmin/user_upload/panel.jpg"  width="100%"  alt="Testtext" >
</picture>


Die sources sollten aber damit es richtig funktioniert so aussehen:


<picture>
<source srcset="https://example.com/fileadmin/_processed_/a/2/csm_panel_0aa85320d6.jpg 1x,
                https://example.com/fileadmin/_processed_/a/2/csm_panel_cfeff4a8e6.jpg 2x" media="(max-width: 320px)" >
<source srcset="https://example.com/fileadmin/_processed_/a/2/csm_panel_395536288c.jpg 1x,
                https://example.com/fileadmin/_processed_/a/2/csm_panel_07158a71f8.jpg 2x" media="(max-width: 720px)" >
<img src="https://example.com/fileadmin/user_upload/panel.jpg"  width="100%"  alt="Testtext" >
</picture>



Im TS mache ich das über das folgende Objekt das als Teil eines FILES-Objektes läuft:


renderObj = IMAGE
    renderObj {
        # WIDTH = 100% FOR UPSCALING AS SOON AS ORIGINAL-IMAGE-SIZE IS PASSED
        params = width="100%"
        file.import.data = file:current:publicUrl
        altText.data = file:current:alternative
        layoutKey = picture
        layout {
            picture {
                element = <picture> ###SOURCECOLLECTION### <img src="###SRC###" ###PARAMS### ###ALTPARAMS### ###SELFCLOSINGTAGSLASH###></picture>
                source = <source srcset="###SRC### ###SRCSETCANDIDATE###" media="###MEDIAQUERY###" ###SELFCLOSINGTAGSLASH###>
            }
        }
        sourceCollection {
            small {
                # ALIGN TO BOOTSTRAP BREAK-POINTS
                mediaQuery = (max-width: 320px)
                width = 290
                quality = 70
                # ALIGN TO DEVICE RESOLUTION
                pixelDensity = 1
                srcsetCandidate = 1x
                dataKey = small
            }
            smallRetina {
                mediaQuery = (max-width: 320px)
                width = 290
                quality = 70
                pixelDensity = 2
                srcsetCandidate = 2x
                dataKey = smallRetina
            }
            medium {
                mediaQuery = (max-width: 720px)
                width = 690
                quality = 70
                pixelDensity = 1
                srcsetCandidate = 1x
                dataKey = medium
            }
            mediumRetina {
                mediaQuery = (max-width: 720px)
                width = 690
                quality = 70
                pixelDensity = 2
                srcsetCandidate = 2x
                dataKey = mediumRetina
            }
      }
}


Hat jemand eine Idee wie ich die richtige Ausgabe erreichen kann? Ist das per TypoScript überhaupt möglich oder macht mir die Art und Weise wie das Image-Objekt zusammen gebaut wird da einen Strich durch die Rechnung? Es muß doch möglich sein jeweils mehrere sources zu einem srcset zusammen zu fassen?!

Vielen Dank für die Hilfe,

Sebastian