Drupal: Integrating the "inline" image upload feature
Below are the detailed insctructions on how to enable adding image to the Drupal article while typing it. Just like you can do at the Google Blogger. In the future posts, I will show how to integrate it into the WYSIWYG editor, to make the posting process look almost like the Blogger's one.
The GoalThe final target for the today's excersise will be to enable the following kind of posting experience:
1. User starts typing his article
2. Somewhere in the middle he decides to include the image into the body of the post.
3. User clicks the "Add image" button, uploads new or selects the existing the image and
4. Image code is added to the post, can be seen in the post preview and after submitting the post, of course
The SolutionThere is a special module that can perform this task - img_assist. It automatically adds the special icon under each textarea element (e.g. under the post body) that opens a separate window for image uploading just like Blogger does. For uploading it requires another Drupal module to be installed - image. Technically speaking you can use some other uploading module, but image workds for sure and we'll use it
So the plan is to:
1. Install the image module
2. Install the img_assist module
3. Enjoy seemless image uploading and allow everybody trying it
Installing the image moduleIt is simpler to do, than to tell about
1. Download the latest version of the module. At the moment it is version 4.6.0 from the 15/04/2005 (Direct link to the archive)
2. Unpack it and copy the whole 'image' directory to the modules directory of your Drupal site.
3. Go to your site's administer->modules page and enable it
4. The 'image galleries' menu item will be created in your aminister menu. Open it. You don't really have to create any gallery, but when the menu is first opened, image storage directories will be created.
That's it, after you clicked the 'Save configuration' button proceed to the img_assist installation
5. To allow users actually upload image (instead of forcing to use the existing ones) visit the administer->access control and grant the 'create images" permission to the authenticated users
Installing the img_assist module1. Download the latest version of the module. At the moment it is version 4.6.0 from the 15/04/2005 (Direct link to the archive)
2. Unpack it and copy the whole img_assist directory to the modules directory of your Drupal site
3. Go to your site's administer->modules and enable it
4. Upload the img_assist.mysql supplied with the module to the your site DB. You can do it using the phpMyAdmin just like we did with the main Drupal database
5. Go to administer->input format and enable the image uploading in all or at least the default input format
Try the results yourselfThat's it. You can play with the modules settings to create image galleries or set the thumbnails size, but the minimal set of work is done, your users can start creating content with the images attached. While the site is in the development mode, you are welcome to try it yourself. Create an account and add a test post with the image attached
1. When typing the post text, you'll notice a special item under the text body area:
2. Click it, an image selection window will be opened. Select an existing icon or upload a new one (Please, upload something small, up to 150Kb).
3. Click "Insert image" and the image code will be added to your post.
Note, that you should not select 'html' option. If you did it, usual html ing tag will be used and by default, it will be cut by the Drupal filters. You would need to do some tuning to allow it. Please tell, if you would like me to post a detailed instructions about it
4. Submit the post and enjoy seeing it on the front page. Image thumbnail is clickable. Click it to see the full-size image
Now you know how to enable the inline image uploading. Still there are some uncovered aspects of it. For example, I'd like know how to simplify the image uploading dialog by removing the "Show code"- "html" option. If you know how make tune the image uploading better, please, share the information. Just comment to this post, and I'll try implementing the solution and will carefully document each and every step for novices.
Meanwhile, the next step for the Symbian Example site, will be the addition of the "source code highlighting" feature. Stay tuned.