Hey there,
I designed a dynamic page that has a screen height hero section, containing a Rich-Content element connected to a CMS collection.
The rich-content element contains an HTML-embed. when I try to resize the embed within the CMS editor, it only gives the option to enter finite width & height (in pixels).
My question is: Is there a workaround (with or without code) that enables me to create a size-responsive HTML embed that is connected to CMS in wix studio?
Product:
I’m Using wix studio with the CMS editor.
What are you trying to achieve:
Getting the HTML-embed element to be 100% in width and height of it’s parent section
What have you already tried:
I tried editing the global CSS file and edit the embed’s values, but nothing seems to effect the embed size
Additional information:
This is is the current situation - I want the embed frame to grow in sync with it’s parent section
the hero with a mis-sized unresponsive HTML embed
What kind of embed did you use?
- HTML-Component
- Custom-Element
???
Custom-Element should give you thhe desired option. —>(will work only on PREMIUM)
Is a custom element connectable to CMS?
No, i think it won’t be ready for a direct connection to the cms (but you can try, i never tested it).
Your only way will be → a CODED solution, connecting the Custom-Element by code to your CMS, fetching the right data ----> pusing it to the custom element to show the content.
As Dima correctly said, to get responsive height, custom elements are a good way to get full height solutions. What are the elements that you’re trying to have be full height? If it’s something that can be the background of the Cell/Section in Wix Studio, you can set the section to fit to screen height/100vh as well.
If you do need a custom element still, would love to help as I spend alot of time with them. I’ve had to connect Custom Elements to a CMS very recently, and the flow (in pseudocode) is roughly:
- Set the data of the custom element -
$w("mycustomelement").setAttribute('data',JSON.stringify(CMSDataObject))
- Handle the data within your element. This depends on which Web Component framework you use. I personally always use Lit. But vanilla JS it’s a function inside called
attributeChangedCallback. So an example would be attributeChangedCallback(attributeName, oldValue, newValue){ if(attributeName=="data"){ //do this} }
- Update the element’s HTML
Note you’ll only be able to see the full sized responsiveness on the live site, as the custom element in the editor renders within an iframe, which is like an HTML Embed. So it’ll look similar to where you are now until you publish.
Hey @chris-derrell , Sounds super helpful! I have a vague understanding of that pseudocode who wrote down, but i think i’m getting the picture. maybe you could help me take one more step? The thing i’d like that custom element do is to get an embed code from a CMS field somehow, and display it as an iFrame in 100% height+width. Could you possibly describe how would you do this? or point me to somewhere i could learn?
Thanks so much!
