TYPO3 Make Page Ressource Image responsive

Question

I have a TYPO3 Website and I'm loading the Hero Image from the Page Ressource Media. In the Backend I have three Cropvariants (Desktop,Tablet,Mobile). The Croped Images are being saved and processed, therefore I can find them in the processed Folder. My Problem is, I'm not able to find a way to display the Images based on my three crops as a responsive image. So if the visitor is on a Mobilephone then it should display the mobile crops and so on.

I've tried to add the property "layoutKey = picture" to the IMAGE Object, but it didnt work. I've also haven't found anything online.

This is the Code within TCEFORM.typoscript and it creates the cropvariants in the Backend.

TCEFORM.sys_file_reference.crop.config.cropVariants {

        desktop {
            title = Desktop
            selectedRatio = 1:1
            allowedAspectRatios {
                1:1 {
                title = 1:1
                value = 1.0
                }

                4:3 {
                title = 4:3
                value = 1.3333333333333333
                }

                16:9 {
                title = 16:9
                value = 1.7777777777777777
                }

                NaN {
                title = Frei
                value = 0.0
                }
            }
        }
        tablet {
            title = Tablet
            selectedRatio = 1:1
            allowedAspectRatios {
                1:1 {
                title = 1:1
                value = 1.0
                }

                4:3 {
                title = 4:3
                value = 1.3333333333333333
                }

                16:9 {
                title = 16:9
                value = 1.7777777777777777
                }

                NaN {
                title = Frei
                value = 0.0
                }
            }
        }
        mobile {
            title = Mobil
            selectedRatio = 1:1
            allowedAspectRatios {
                1:1 {
                title = 1:1
                value = 1.0
                }

                4:3 {
                title = 4:3
                value = 1.3333333333333333
                }

                NaN {
                title = Frei
                value = 0.0
                }
            }
        }
    }

To load the image in the Header.html Partial I use the following ViewHelper:

<f:cObject typoscriptObjectPath="lib.headerImage" />

Which loads the lib.headerImage Object:

lib.headerImage = IMAGE
lib.headerImage {
  file {
    import.data = levelmedia:-1, slide
    treatIdAsReference = 1
    import.listNum = 0
  }
}

I need a way either with typoscript or with viewhelpers to create the HTML srcset so the browser display the correct cropvariant according to the users device.

Answer 1

when you are using fluid_styled_content try to override the image partial web/typo3/sysext/fluid_styled_content/Resources/Private/Partials/Media/Rendering/Image.html within the template variables you can build your own custom image with src sets.