Image gallery: breakpoints for 2 or 3 imagecols missing + low image resolution

[christophbee]

Bug Report

Prerequisites

• [ ] Can you reproduce the problem on TYPO3 v11.5 LTS
• [x] Can you reproduce the problem on TYPO3 v12.4 LTS
• [x] Did you perform a cursory search to see if your bug or enhancement is already reported?

Description

It's about the content element 'Images' (CType 'image') where you can choose the number of image columns (field 'imagecols'). When choosing 2 or 3 columns the breakpoint is missing in CSS + the image resolution is too low for switching to 2 or 1 columns on mobile devices.

Steps to Reproduce

1. use a content element of type "Images"
2. Add 3 images
3. choose 3 imagecols
4. check the responsive behaviour in frontend

Expected behavior

At breakpoint 'sm' the --gallery-columns shall change to 1 optional: At breakpoint 'md' the --gallery-columns shall change to 2

Additionally the image resolution is expected to adopt to the new column sizes.

Actual behavior

There is no breakpoint defined in CSS for 2 and 3 image columns, see screenshot.

Screenshots

3 columns on larger devices:

manually changed to 2 columns at breakpoint 'md' -> low image resolution

manually changed to 1 column at breakpoint 'sm' -> low image resolution

Versions

TYPO3 v12.4.17 bootstrap_package v14.0.7

[christophbee]

UPDATE: I found to adjust the images' size by setting the multiplier in typoscript via

lib.contentElement.settings{
    gallery{
        columns{
            2{
                    multiplier {
                        small = 1
                        extrasmall = 1
                    }
                }
            3{
                multiplier {
                    medium = 1
                    small = 1
                    extrasmall = 1
                }
            }
        }
    } 
}

[christophbee]

For my case the issue is solved but maybe it's a reason to modify image rendering a little bit in future versions.