Documentation on how to switch to picture-tag

[Starraider]

I want to use the picture-tag in combination with the crop variants. But unfortunatelly there is no documentation about how to do this. I defined two crop variants according to the links you provided. But in the frontend it still don't show any picture-tag. I guess I have to fill in the lib.contentElement.settings.tx_smsresponsiveimages.breakpoints, but how? I tried this: lib.contentElement.settings.tx_smsresponsiveimages.breakpoints = {0: {'cropVariant': 'default', 'media': '(min-width: 1000px)', 'srcset': '1000, 1200, 1400, 1600'}, 1: {'cropVariant': 'mobile', 'srcset': '400, 600, 800, 1000, 1200, 1400, 1600'}} But it shows an error message. So please can you write a short description, how to use the picture-tag?

[s2b]

I would advise to not use picture with crop variants for all content elements. Not that it's not possible, but it can lead to problems when you start styling in the frontend.

However, if you want to do it, your approach was very close:

lib.contentElement.settings.tx_smsresponsiveimages.breakpoints {
    0 {
        cropVariant = default
        media = (min-width: 1000px)
        srcset = 1000, 1200, 1400, 1600
    }
    1 {
        cropVariant = mobile
        srcset = 400, 600, 800, 1000, 1200, 1400, 1600
    }
}

If you have multiple columns, you should also consider setting this for each column individually, as I described here: https://techblog.sitegeist.de/responsive-images-with-typo3-8-7/#comment-4

Concerning your request to add documentation for these TypoScript options, you are absolutely correct. I will open a new issue for that.