Question

I am using Drupal 7 with TinyMCE via the Wysywig module.

I have enabled the insert image option but when the insert image dialogue pops up the user is shown a number of options for the image which would be undesirable. In addition there is no option to add a CSS class to the image. Is there a way that I can easily change this dialogue to remove options like dimensions, alignment, border etc and add in a class option?

Answer 1

To apply CSS classes to images: Normally, there is an option under the “Appearance” tab to add a CSS class to the image by a drop-down of available classes. If there are no tabs in the pop-up box (sounds like there aren’t), go to the “Buttons and Plugins” section of the settings for your WYSWIWYG profile (under Configuration > Content Authoring) and tick the “Advanced image” box.

This by default gives a crazy long list of every class in your theme. To change this to something more useful, go to the CSS section and change the “Editor CSS” drop down. This is used for the image classes in Advanced Image settings as well as other lists of classes. You probably want to set it to “Define CSS” and create a CSS file with a limited selection of classes, then point to this in CSS Path.

---

To prune the user interface to get a more limited, user-friendly range of options: I don’t know of any way to do this through configuration. There are, however, two brute-force methods:

1. Hide them with CSS (display: none;) This is what I use. It’s a little harder than it should be because the HTML markup is ghastly – all tables with no classes or ids in useful places – but it’s reasonably straightforward if you use things like nth child rules and count how many <tr> elements there are until you reach the one(s) you want to remove (this assumes your users won’t be administrating content using IE 8 or less, or FF3 – if they might, write some jQuery instead).
2. Hack the TinyMCE code. I haven’t tried this. Investigate the HTML files in sites/all/libraries/tinymce/jscripts/tiny_mce/themes/advanced. Messing around with this doesn’t look pleasant, it’s probably very easy to break the interactivity.

Here’s what I use to get a nice, simple, one tab interface which has nothing but Image URL, alt text, mouseover text, preview, dimensions, and a CSS class dropdown. I have the following CSS code added to the end of sites/all/libraries/tinymce/jscripts/tiny_mce/themes/advanced/skins/default/dialog.css. It turns off the features I don’t want, kills the tabs, and squeezes it all neatly into the size of the popup:

#appearance_panel.panel { display: block; }
.tabs { display: none; }
#appearance_panel tr:nth-child(1), #appearance_panel tr:nth-child(3), #appearance_panel tr:nth-child(4), #appearance_panel tr:nth-child(5), #appearance_panel tr:nth-child(6)#appearance_panel tr:nth-child(4), #appearance_panel tr:nth-child(5), #appearance_panel tr:nth-child(6), #appearance_panel tr:nth-child(8) { display: none; }
.panel_wrapper #general_panel { height: 270px; }
.panel_wrapper { padding: 3px 10px 3px;}
body { margin: 0; }