TinyMCE throws "input type format error" if we specify the width in %.. is there any settings to avoid this?
The website UI is in responsive layout and the width of image need to be 100% in order to scale proper.. a work around solution I have added is to inject the % width using jQuery.. but looking for the right way to do this..
If there is no way to change this behavior - it will be nice if Umbraco team can implement some solution as more and more sites are going responsive..
we approach it from the other direction, with tinymce config we disallow any height/width attributes on the images, and then set the image width 100percent in our css.
Saves the time when your content inputters start setting fixed widths on the images and then wondering why they look wrong when the site reacts to the viewport size :-)
Hi Mike.. thank you for the reply.. its a very clean solution and am gonna do that for all new projects..unfortunately the project am working right now is kind of maintenace - it has a lot of pages and templates already and am making only few new pages of the website as responsive.. it will be a bit risky to remove width from config as some of the old page contents needs width in the images..
Hi Mike.. thank you for the reply.. its a very clean solution and am gonna do that for all new projects..unfortunately the project am working right now is kind of maintenace - it has a lot of pages and templates already and am making only few new pages of the website as responsive.. it will be a bit risky to remove width from config as some of the old page contents needs width in the images..
Here is another approach that comes with some cautions. Gauge the ability of your content editing team prior to implementing.
Disable the tidy feature in /config/umbracoSettings.config.
<!-- clean editor content with use of tidy --> <TidyEditorContent>False</TidyEditorContent>
This will rid you of the input error you are experiencing.
Then get your hands dirty in the plugins directory:
/umbraco_client/tinymce/plugins/umbracoimg/js/image.js *** Note: these changes could be over written in an upgrade.
In this file you can deal with image widths and heights as you see fit upon insert into the editor.
For example: I wanted all tinymce images to be width='100%' and height='' on insert. I assigned empty heights on all height references and used 100% width in all width references. This gave me very consistent image insertion.
I really like Mike's solution. But if you are in a spot where tidy is already disabled for other reasons. Then this might be a solution for you.
TinyMCE problem with image width in %
TinyMCE throws "input type format error" if we specify the width in %.. is there any settings to avoid this?
The website UI is in responsive layout and the width of image need to be 100% in order to scale proper.. a work around solution I have added is to inject the % width using jQuery.. but looking for the right way to do this..
If there is no way to change this behavior - it will be nice if Umbraco team can implement some solution as more and more sites are going responsive..
Thanks and Regards,
Anz
we approach it from the other direction, with tinymce config we disallow any height/width attributes on the images, and then set the image width 100percent in our css.
Saves the time when your content inputters start setting fixed widths on the images and then wondering why they look wrong when the site reacts to the viewport size :-)
Hi Mike.. thank you for the reply.. its a very clean solution and am gonna do that for all new projects..unfortunately the project am working right now is kind of maintenace - it has a lot of pages and templates already and am making only few new pages of the website as responsive.. it will be a bit risky to remove width from config as some of the old page contents needs width in the images..
Hi Mike.. thank you for the reply.. its a very clean solution and am gonna do that for all new projects..unfortunately the project am working right now is kind of maintenace - it has a lot of pages and templates already and am making only few new pages of the website as responsive.. it will be a bit risky to remove width from config as some of the old page contents needs width in the images..
Here is another approach that comes with some cautions. Gauge the ability of your content editing team prior to implementing.
Disable the tidy feature in /config/umbracoSettings.config.
This will rid you of the input error you are experiencing.
Then get your hands dirty in the plugins directory:
/umbraco_client/tinymce/plugins/umbracoimg/js/image.js *** Note: these changes could be over written in an upgrade.
In this file you can deal with image widths and heights as you see fit upon insert into the editor.
For example: I wanted all tinymce images to be width='100%' and height='' on insert. I assigned empty heights on all height references and used 100% width in all width references. This gave me very consistent image insertion.
I really like Mike's solution. But if you are in a spot where tidy is already disabled for other reasons. Then this might be a solution for you.
is working on a reply...