Dynamic CMS Grid in Webstudio

Question

I'm looking for a possibility to change the orientation and ratio for images in a Grid, that come from a cms/cdn. Default would be square 1 column by 1 row. If the image has the "orientation"-value set in CMS to landscape it would span 2 by 1, if set to portrait it would span 1 by 2. Maybe an additional value "size" could set greater spans like 4 by 4 (square), 3 by 2 (landscape) and 2 by 3 (portrait) for promoted images. I found a tutorial for Webflow, which covers most of the functionality: https://www.youtube.com/watch?v=VJ0swK8mbg4
Since Webstudio doesn't have an integrated CMS, the Values would have to come from an external (headless) CMS. But how to read them out and process them, so that the Grid-Items in Webstudio visualise as wanted?

Oleg Isonen · Answer

Your question boils down to the ability to change CSS based on API response.

Set a css variable for the css values you need to be dynamic in the style panel
Use HTML Embed to render dynamic values for these css variables using a binding:

Plain Text

`
<style>
:root {
  --my-variable: ${myValue};
}
</style>
`

Niels · Answer

Hey, do u guys ever make holidays? It the 1st of January, I never hoped to get e response as quick as this!

Niels · Answer

Like this?

Niels · Answer

Set under Global Root in Navigator

Niels · Answer

Would it be better to use Content Embed than HTML Embed in order to be able to style the content?

Bogdan · Answer

Setting css variables from data variables is not yet supported so you need to use html embed to bypass this limitation for this specific variable.

Join the Webstudio community

Dynamic CMS Grid in Webstudio