Render inline Style in Fusion

Community Newcomer's Corner
1

Hey Guys,
i would like to render a div with a inline style.

Something like that:

prototype(WG.Site:Content.TextImageBg) < prototype(Neos.Neos:ContentComponent) {
    text = Neos.Neos:Editable {
        property = 'text'
    }

    image = Neos.Fusion:Case {
        image {
            condition = ${q(node).property('image') ? true : false}
            renderer = Sitegeist.Kaleidoscope:AssetImageSource {
                asset = ${q(node).property('image')}
            }
        }
        dummyImage {
            condition = ${site.context.inBackend}
            renderer = Sitegeist.Kaleidoscope:DummyImageSource
        }
    }

    renderer = afx`
        <div class="text background-img" style="background-image:url('{props.image}')">{props.text}</div>        
    `
}

Is there a way to do it with fusion?

2

Hi Finn

Your syntax for string concatenation is incorrect. Apart from that, it should work.

See this FusionPen: FusionPen: Build, Test and Discover Fusion Code for Neos CMS

2 Likes
3

Big thank you! Still learning, its not easy to understand the Fusion Part, but I am trying :slight_smile:

1 Like