Very new to Umbraco with a little html/css experience, so please go easy ;-)
After struggling to add an IFrame from googlemaps using the html editor on a text page, I've followed a post from here showing how to add IFrames to an xslt and macro and added to my page. All OK in terms of the macro and Googlemaps shows nicely, but the page styling is recked!
For the macro parameters I tried types text and numbers just in case but this seemed to make no difference.
Hi Lea and welcome to the wonderfull world of Umbraco :-)
The reason why you can't place an iframe in the rich text editor is because it's not allowed by default.
But sounds to me like you've found another solution for this so therefore there's no need to explain the why's of the above any further.
When you say that the styling is wrecked what do you mean? Is it the styling of the google map that is not looking as expected or is the page styling that looks weird? And have the page been styled properly with CSS and all before adding the map?
Thanks for the confirmation that iFrames aren't 'allowed' - I had my suspicion!
I'm using u.media's Business starter package (v0.5) with the purple and white skin, and the page is displayed fine without the Googlemaps macro. The macro is placed on the templated 'Textpage' Document and functions and displays well, it's also interactive as expected. But the page turns grey half way down rather than remaining white. If I remove the macro all is well again.
I'm starting to utilise Chrome's inspect element functionality to debug and learn some css as it's great that you can simply enable/disable css features and see the page change live, so maybe I'll try and find out what's happening - although I'm not yet quite that confident.
Again, many thanks for your reply, much appreciated.
It's because the editor (tidyMce) is stripping it from the outputted code.
You could either turn tidy of in the umbracoSettings.config or make a textfield property on the page where you need to insert the iframe and then render the code by fethcing it with a XSLT macro for instance.
Seems like removing the tidying wasn't enough -- I had to add the text "iframe[src|align|frameborder|height|width|name]" to the list of allowed elements in the tinymce.config file.
I too am currently struggling with how to allow an IFRAME to be inserted into the richtext TinyMCE wysiwyg editor, and I too found some other advice on this forum about instead creating a parameterized macro with XSLT as an alternative way to do this.
The problem I originally had with the macro approach sounds exactly like what the original poster described, where the bottom half of the page was "broken" and mis-styled. However I did find the cause (and solution) for this: the reason is because instead of my XSLT rendering the iframe as <iframe></iframe> (with closing tag), it was instead rendering it as <iframe /> (as a single, self-closing tag, which breaks the HTML).
There are a few recommended ways to avoid this problem, which I found nicely summarized here: Stop HTML tags from self-closing . Hopefully this will help anyone else who stumbles across this message with the same problem. Ideally, I would prefer if the editor would allow this natively. (It seems like it should, it just doesn't work for me yet.)
I had honestly almost forgotten about this post from 10 months ago. I actually don't use this technique anymore, it was very fragile and prone to breaking. I now use a different approach which I actually just formalized into a package a few weeks ago... it's called the Widget Dropper. Check it out, hopefully is a helpful alternative?
Yes, we got started with Umbraco amost one year ago with version 4.7.0, so have never had the need to work with XSLT, which is just fine since we come from ASP.NET MVC with C# Razor background so it was a very natural transition. It has been years since I've personally worked with XSLT and from what I remember of it, it was very slow-going and painful to work with. (For me, at least.) Being able to code C# razor just feels faster and more natural, and our designers can work with it and make simple changes to it easily enough.
I think it's just a personal choice though, so choose whatever you're more comfortable/efficient working in. The (now-dead) Umbraco 5 project wasn't going to support XSLT at all, and would have forced you to use only Razor, if that's any indication of how the core developers feel about it.... (I'm guessing here, may be wrong.)
Today was the first time I'd worked with XSLT in a few years and you know what? It was very slow going and painful to work with! Not the most intuitive syntax I've ever worked with... I've had some experience with Razor over the past few months so I'm sure I'll find it easy enough to work with.
I'm using u.media's Business starter package (v0.5) with the purple and white skin, and the page is displayed fine without the Googlemaps macro. The macro is placed on the templated 'Textpage' Document and functions and displays well, it's also interactive as expected. But the page turns grey half way down rather than remaining white. If I remove the macro all is well again. You could either turn tidy of in the umbracoSettings.config or make a textfield property on the page where you need to insert the iframe and then render the code by fethcing it with a XSLT macro for instance.
Business starter - adding IFrames (googlemaps)
Hi All
Very new to Umbraco with a little html/css experience, so please go easy ;-)
After struggling to add an IFrame from googlemaps using the html editor on a text page, I've followed a post from here showing how to add IFrames to an xslt and macro and added to my page. All OK in terms of the macro and Googlemaps shows nicely, but the page styling is recked!
For the macro parameters I tried types text and numbers just in case but this seemed to make no difference.
Any pointers welcomed.
Thanks
Lea
Hi Lea and welcome to the wonderfull world of Umbraco :-)
The reason why you can't place an iframe in the rich text editor is because it's not allowed by default.
But sounds to me like you've found another solution for this so therefore there's no need to explain the why's of the above any further.
When you say that the styling is wrecked what do you mean? Is it the styling of the google map that is not looking as expected or is the page styling that looks weird? And have the page been styled properly with CSS and all before adding the map?
/Jan
Hi Jan
What a fabulous welcome, thank you so much.
Thanks for the confirmation that iFrames aren't 'allowed' - I had my suspicion!
I'm using u.media's Business starter package (v0.5) with the purple and white skin, and the page is displayed fine without the Googlemaps macro. The macro is placed on the templated 'Textpage' Document and functions and displays well, it's also interactive as expected. But the page turns grey half way down rather than remaining white. If I remove the macro all is well again.
I'm starting to utilise Chrome's inspect element functionality to debug and learn some css as it's great that you can simply enable/disable css features and see the page change live, so maybe I'll try and find out what's happening - although I'm not yet quite that confident.
Again, many thanks for your reply, much appreciated.
Lea
By using Chrome Inspect elements it seems like it's because the div#page hasn't enough 'height' to support the whole page.
So however this height is being calculated, it's failing to recognise that there is another object (iFrame) within the page and adding this.
And, interesting the page normally has the right column 'Edit the right column' and 'create your own macros', but that's dissapeared.
I deleted the complete page, and recreated (just in case), no difference.
Oh the fun of css....
Hi Lea
Is it possible to see the site somewhere or are you only working locally?
Maybe you need to set dimensions for the div and perhaps even float it left depending on the context it's in?
/Jan
Hi Jan
Thanks for the assistance. Is there a way of PM'ing you the url?
Cheers
Lea
Hi Lea
If you're on twitter then you can find me as @JSkovgaard - then you can DM me if you like me to have a look at the issue.
/Jan
Hi Jan,
I'm having the same issue with IFrame. Can you explain why the editor won't allow it and how to change this behavior?
Thanks..
Hi Ulu
It's because the editor (tidyMce) is stripping it from the outputted code.
You could either turn tidy of in the umbracoSettings.config or make a textfield property on the page where you need to insert the iframe and then render the code by fethcing it with a XSLT macro for instance.
Hope this makes sense? :-)
/Jan
Do I have to restart Umbraco after editing the settings? If yes, would be great to have a "Restart' button somewhere..
Hi Ulu
Try touching the web.config - this will "refresh" the application.
Otherwise if you have access to IIS you could recycle the app pool.
/Jan
Seems like removing the tidying wasn't enough -- I had to add the text "iframe[src|align|frameborder|height|width|name]" to the list of allowed elements in the tinymce.config file.
I too am currently struggling with how to allow an IFRAME to be inserted into the richtext TinyMCE wysiwyg editor, and I too found some other advice on this forum about instead creating a parameterized macro with XSLT as an alternative way to do this.
The problem I originally had with the macro approach sounds exactly like what the original poster described, where the bottom half of the page was "broken" and mis-styled. However I did find the cause (and solution) for this: the reason is because instead of my XSLT rendering the iframe as <iframe></iframe> (with closing tag), it was instead rendering it as <iframe /> (as a single, self-closing tag, which breaks the HTML).
There are a few recommended ways to avoid this problem, which I found nicely summarized here: Stop HTML tags from self-closing . Hopefully this will help anyone else who stumbles across this message with the same problem. Ideally, I would prefer if the editor would allow this natively. (It seems like it should, it just doesn't work for me yet.)
Hi Ulu
Thank you for the Tiny Mce config line. That got me going.
I added the Tiny config line and that didn't change anything, so I added the Small inside Tiny config. Still no change
But when I turned Tidy Off in umbracoSettings.config - WORKED YAY!!
<!-- clean editor content with use of tidy CHANGED FROM TRUE TO FALSE 14/3/2012-->
<TidyEditorContent>False</TidyEditorContent>
@Funka! You've just saved me a lot of heartache before I even realised I had a problem!
@Damian, glad I could help!
I had honestly almost forgotten about this post from 10 months ago. I actually don't use this technique anymore, it was very fragile and prone to breaking. I now use a different approach which I actually just formalized into a package a few weeks ago... it's called the Widget Dropper. Check it out, hopefully is a helpful alternative?
Best of luck!
@Funka! Thanks a lot, it works a treat! Are you using Razor rather than XSLT in your projects? Do you recommend it?
Yes, we got started with Umbraco amost one year ago with version 4.7.0, so have never had the need to work with XSLT, which is just fine since we come from ASP.NET MVC with C# Razor background so it was a very natural transition. It has been years since I've personally worked with XSLT and from what I remember of it, it was very slow-going and painful to work with. (For me, at least.) Being able to code C# razor just feels faster and more natural, and our designers can work with it and make simple changes to it easily enough.
I think it's just a personal choice though, so choose whatever you're more comfortable/efficient working in. The (now-dead) Umbraco 5 project wasn't going to support XSLT at all, and would have forced you to use only Razor, if that's any indication of how the core developers feel about it.... (I'm guessing here, may be wrong.)
Good luck to you!
Today was the first time I'd worked with XSLT in a few years and you know what? It was very slow going and painful to work with! Not the most intuitive syntax I've ever worked with... I've had some experience with Razor over the past few months so I'm sure I'll find it easy enough to work with.
Thanks again for the help.
I'm using u.media's Business starter package (v0.5) with the purple and white skin, and the page is displayed fine without the Googlemaps macro. The macro is placed on the templated 'Textpage' Document and functions and displays well, it's also interactive as expected. But the page turns grey half way down rather than remaining white. If I remove the macro all is well again. You could either turn tidy of in the umbracoSettings.config or make a textfield property on the page where you need to insert the iframe and then render the code by fethcing it with a XSLT macro for instance.
------------------------------------------------------------------------------------
Watch Streaming Full Movies Online Free No Sign Up No Surveys
Hi Sonny, thanks for this.
Making umbraco settings <TidyEditorContent>falseTidyEditorContent>
is also worked for me.
is working on a reply...