Join the Webstudio community

Updated last month

Dynamic CMS Grid in Webstudio

At a glance

The community member is looking for a way to change the orientation and ratio of images in a Grid, based on values set in an external CMS/CDN. The default would be a square 1 column by 1 row, but landscape images would span 2 by 1, and portrait images would span 1 by 2. There is also a suggestion to add a "size" value to set greater spans like 4 by 4, 3 by 2, and 2 by 3 for promoted images.

The community members discuss using CSS variables and HTML Embed to render dynamic values for these CSS variables, based on the API response. One community member suggests using Content Embed instead of HTML Embed to be able to style the content. Another community member notes that setting CSS variables from data variables is not yet supported, so HTML Embed needs to be used to bypass this limitation.

Useful resources
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?
O
N
B
6 comments
Your question boils down to the ability to change CSS based on API response.

  1. Set a css variable for the css values you need to be dynamic in the style panel
  2. Use HTML Embed to render dynamic values for these css variables using a binding:
Plain Text
`
<style>
:root {
  --my-variable: ${myValue};
}
</style>
`
Hey, do u guys ever make holidays? It the 1st of January, I never hoped to get e response as quick as this!
Like this?
Attachment
Bildschirmfoto_2025-01-01_um_14.02.45.png
Set under Global Root in Navigator
Would it be better to use Content Embed than HTML Embed in order to be able to style the content?
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.
Add a reply
Sign up and join the conversation on Discord