I've found that the holy grail for an easy-to-use, non-techie drupal website is the ability to add inline images, wherever and whenever a properly-permissioned user wants. This is the request I get most often from my clients, and until today I never had a good answer. I've finally found, what seems to be, the best, most compliant, and easy to use way to add images for the average joe. Here's the method I'll be using from now on:
For a very long time, the problem has been the fact that there were LOTS of ways to do this...but none of them worked very well. Modules would solve part of the problem but not all of it. Or they might offer confusing methods, or most often, they don't actually resize the images (creating a copy) so the image quality was poor. I've come up with a simple 2 module solution that has me really excited.
The two modules I'm using are: BUEditor and IMCE. I've found that they work very well together, which hasn't been the case in the past when I've tried to use them. I've used IMCE with other methods (CCK fields, etc) and have been very unhappy with the usability.
It seems that since I've last tried IMCE, it's improved greatly. It is much more intuitive for the user now and, most importantly, truly resizes images properly. It resizes them on import (like the image module) and also can create thumbnails on import. But, not only this, it also allows resizing of the images after they've been uploaded, giving the user an option to create a new version of the image at a particular size. This is a fantastic addition!!
BUEditor has become my new favorite non-WYSIWYG solution. It adds only the cleanest code and encourages my users to actually learn what they're doing, which can do nothing but improve accountability for content.
Ok so, here's my process:
php:
$imce_url = function_exists('imce_menu') && user_access('access imce') ? url('imce/browse') : '';
return "js:
var B = eDefBrowseButton('$imce_url', 'attr_src', 'Browse', 'image');
var form = [
{name: 'src', title: 'Image URL', suffix: B},
{name: 'width', title: 'Width x Height', suffix: ' x ', getnext: true, attributes: {size: 3}},
{name: 'height', attributes: {size: 3}},
{name: 'alt', title: 'Alternative text'}
];
eDefTagDialog('img', form, 'Insert/edit image', 'OK');
";
So, I want to add a new field to the BUEditor image form that allows people to add a class name, which will create the float. So, I did this:
php:
$imce_url = function_exists('imce_menu') && user_access('access imce') ? url('imce/browse') : '';
return "js:
var B = eDefBrowseButton('$imce_url', 'attr_src', 'Browse', 'image');
var form = [
{name: 'src', title: 'Image URL', suffix: B},
{name: 'width', title: 'Width x Height', suffix: ' x ', getnext: true, attributes: {size: 3}},
{name: 'height', attributes: {size: 3}},
{name: 'alt', title: 'Alternative text'},
{name: 'class', title: 'Position: floatleft, floatright, or leave blank'}
];
eDefTagDialog('img', form, 'Insert/edit image', 'OK');
";
Note, I just added a new field to the var form which is for positioning. It will just be a text field where they can type in "floatleft" or "floatright", which are css classes I've setup that look like:
.floatleft {float: left;
padding: 0px 10px 10px 0px;
}
.floatright {float: right;
padding: 0px 0px 10px 10px;
}
Once that's done, and you've added/removed any other BUEditor fields you want, you can save your editor.
That's it! To me, this is the best solutions, by far, I've seen yet. Hopefully this helps some other folks navigate the land of CMS images for non-techie users...