Switch between renderers based on the aspect ratio of a Kaleidoscope image

Test.fusion

prototype(Vendor.Site:TestImageFormatSwitch) < prototype(Neos.Fusion:Component) {

    @styleguide {
        title = "Test Image Format Switch"
        props {
            imageSource = Sitegeist.Kaleidoscope:DummyImageSource
        }

        useCases {
            square {
                props.imageSource = Sitegeist.Kaleidoscope:DummyImageSource {
                    baseWidth = 400
                    baseHeight = 400
                }
            }

            wide.props.imageSource = Sitegeist.Kaleidoscope:DummyImageSource {
                baseWidth = 800
                baseHeight = 400
            }

            high.props.imageSource = Sitegeist.Kaleidoscope:DummyImageSource {
                baseWidth = 400
                baseHeight = 800
            }
        }
    }

    imageSource = null

    renderer = Neos.Fusion:Component {
        aspect =  ${props.imageSource.width() / props.imageSource.height()}
        [email protected] = ${props.imageSource.width() && props.imageSource.height()}
        imageSource = ${props.imageSource}

        renderer = Neos.Fusion:Case {
            wide {
                condition = ${props.aspect >= 1.1}
                renderer = afx`
                    <div style="background-color: burlywood"> wide <Sitegeist.Kaleidoscope:Image  imageSource={props.imageSource} width="200" /></div>
                `
            }
            high {
                condition = ${props.aspect <= 0.9}
                renderer = afx`
                    <div style="background-color: burlywood"> high <Sitegeist.Kaleidoscope:Image  imageSource={props.imageSource} width="200" /></div>
                `
            }
            square {
                condition = ${props.aspect < 1.1 && props.aspect > 0.9 }
                renderer = afx`
                    <div style="background-color: burlywood"> wide <Sitegeist.Kaleidoscope:Image  imageSource={props.imageSource} width="200" /></div>
                `
            }
            unknown {
                condition = true
                renderer = afx`
                    <div style="background-color: burlywood"> unknown dimension</div>
                `
            }
        }
    }
}