tinymce

I can't count how many times this topic comes up in Drupal, and I personally have had to deal with a clean way to implement inline images in posts on a ton of occasions. There are a lot of options out there, but I have used this one sucessfully on multiple occasions, and only recently implemented this exact solution on my own blog a few weeks back, and had the topic come up again today with some questions from @susanmacphee.

In Drupal 7, with image field and image cache functionality in core, we may begin seeing many more simple implementations of images inline, but for now in Drupal 6, we are still stuck with some clunky options to make it "simple". Again, please note this is NOT the only way to implement inline images, but I've found it offers the most flexibility for me personally.

The Drupal Modules you will need

• WYSIWYG - offers an API for implementing a variety of WYSIWYG editors including FCKeditor 2.6, jWYSIWYG 0.5, markItUp 1.1.5, NicEdit 0.9.0, openWYSIWYG 1.4.7, TinyMCE 3, TinyMCE 2, Whizzywig 55, WYMeditor 0.5, YUI editor 2.7.0
• IMCE - IMCE is an image/file uploader and browser that supports personal directories and quota.
• IMCE Bridge - This module is acts as a bridge between the IMCE module and the Wysiwyg module.

For the purposes of this implementation, I'm going to assume you already have the WYSIWYG installed and configured with your chosen editor. Instructions on istallation for the WYSIWYG module can be found in this handbook page.

Also, for the purposes of this demonstration, I'm using TinyMCE as the editor, but I believe the instructions here will work with both FCKedtior and TinyMCE.

Turning on the modules

Once you have downloaded, both the IMCE and IMCE Bridge modules, you will need to turn them on at admin/build/modules. The default IMCE module can be found in the Other section of modules, and the IMCE WYSIWYG Bridge can be found with WYSIWYG under User Interface modules.

Configuring the WYSIWYG module

Once all the modules are turned on, the first thing you will want to do is head over to admin/settings/wysiwyg and for each input filter you have selected to enable a WYSIWYG editor for, you will need to select the associated edit link in order to add the image handling options to that input format.

Once you have found the edit page, you will need to enable two options, Image and IMCE. These are found under the Buttons & Plugins fieldset. On my setup, the Image checkbox is the 6th from the top in the right column, and the IMCE is in the last row in the center. This may vary depending on any other modules you have enabled that add additional options to the WYSIWYG module.

Now once those are enabled, in your default editor, you should (at least as super admin have the image button on the WYSIWYG toolbar. It's there near the middle of the screenshot below. I'll get to configuring the IMCE & role based permissions in a moment here.

Configuring IMCE per user roles

The IMCE module offers great flexibility when configuring how your roles may interact with uploading images to the server. This can play an important role when dealing with a large site with hundreds and thousands of users, and limited server space. You can start configuring the IMCE settings at admin/settings/imce.

You can see two sections to this configuration form, first the IMCE profiles, and second, the assignments of profiles to roles. By default, there is a custom profile that is applied to user 1, which is great when using a single user blog to allow the admin to really do whatever they want, upload as much as they want, etc. For the demonstration here, I'm just going to show what is under that page, however, you can create as many profiles as you want, and configure different settings for each, and apply them to the roles associated with your site accordingly.

You will see in the following screenshots that the IMCE module does a GREAT job of putting good descriptions. If you get confused, read closely, and the answer should be there!! You may also click on the screenshots below for the larger version.

The settings available in the above screenshot are:

• Profile Name - Just an identifier for the profile
• Maximum File Size per Upload - The maximum size per file uploaded. This cannot exceed the limit configured in your php.ini
• Directory Quota - This quota is for any directory the user has access to. So if this is set to 2MB, and the user has access to 5 folders, they could upload up to 10MB spread across those folders they may access
• Total User Quota - The total quota that the user must stay under.
• Permitted File Extensions - This one is VERY important when granting users access. In my example as admin/user1 I have placed no restrictions, but this should be set to something like .jpg, .png, .gif
• Maximum Image Resolution - The largest size a user may upload. You may want to use this to keep a user's original upload from taking up too much space on the server. There are resize options available, but this original image will still be uploaded and stored.
• Maximum Number of Files per Operation - allows a user to select more than 1 image (not to upload at a time, but to operate on) to resize, delete, etc.

Next, you are able to configure how the profile will have access to certain directories on the server. Again, in my configuration for user1, there are no restrictions here, but in order to create a directory for each user to manage user quotas, you could use the following token to accomplish that:

users/user%uid creates directories such as users/user1, users/user42, etc.

For each directory you configure here for a profile, you can choose to allow them to browse, upload, create thumbnails, delete & resize in that directory. This is is really helpful if you want a user to have access to a directory to browse for images you may have set, but NOT be able to upload to that directory. The Include subdirectories option for each will apply the same settings to those directories underneath the one defined.

The thumbnails section is quite handy if you want to automatically generate alternate sizes for the images being uploaded by a user. You can create as many as you like by simply entering in a name, a set of dimensions using WIDTH x HEIGHT, and can optionally add a prefix and suffix to the file name in order to avoid naming conflicts.

Using IMCE in your WYSIWYG editor

And for the final product, I'll show you a few shots of using IMCE in your editor to get images inline with your content!

You can click on the image button in your WYSIWYG toolbar to open the initial image configuraiton popup.

Next to the Image URL field, you see the browse button, which will allow you to open the IMCE file manager, and upload images to the server, and insert or manipulate images already on the server.

Finally, we have the options available to us here. In the upper left, we have the file browser that shows us the directories we have access to, lower left is a log of actions and operations, lower right is a preview window, and the upper right are the images located in the directory being browsed. At the top of the window you will see upload, delete, resize, and Send to TinyMCE.

Choosing Upload will present you with an upload field to add a new image from your computer, and allow you to choose which if any of the preconfigured thumbnail sizes in the profile should also be created when uploading this image

Selecting an image, and then choosing delete will prompt you first, then delete the image in question.

Selecting an image, and then choosing resize will give you boxes for height and width and an option to create a new image, or resize the original. If you just enter a width, and tab out of the box, it will auto detect the appropriate height to use to keep scale.

Once you have uploaded or resized any images you need, you may select an image, and then choose the Send to TinyMCE option, and the image details will be sent back to the small popup window where you can review the location, and click the Insert button, finally inserting the image into the editor.

Conclusion

This was a damn long example in order to accomplish what really should be so simple you'd think in Drupal. Please feel free to chime in on eaiser ways, or why these modules may or may not be good to use, but for the features they do implement, especially the quotas per role in IMCE, it is a powerful option, but really takes some documentation for end users to be able to use this method quickly.

Also, configuring this appropriately can be a challenge, and I hope this has at least given a brief overview of where to get started!!