Build web site

Build an own community web-site. A samurai path. A tutorial on Drupal

Sunday, November 27, 2005

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 Goal

The 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 Solution

There 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 module

It 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 module

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 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 yourself

That'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.


At 5:40 PM, Anonymous Mike Macgirvin said...

I have the img_assist installed and working. Works great - and even with the tinyMCE editor. I only have one question that maybe you could help me with...

When I upload an image and publish a post, the front page shows the posting with the image (great) - but it also shows (on the front page) the image separately as a new content node.

Any ideas how to prevent exposing these upload nodes as page 1 events?

At 3:54 AM, Blogger Artem said...

Mike, I noticed the same issue. I don't have a solution at the moment, but I'll definitely try solving it. Most probably next week. Or if you find the solution yourself, please let me know about it :)

I am myself just starting with the Drupal (even though I have some experience with Mambo and PhpNuke). That makes it easier to write a tutorial - I am writing it for myself also :)

At 1:53 PM, Blogger Artem said...

The long and detailed answer is pending, but the quick answer is:
When you upload (i.e. create) an image, if you have enough rights you are presented an option to choose if you want a new item to be "promoted to the front page". If you uncheck it (or if it was unchecked by default), item won't be published on the front page

Not to bug your users, you can disable the item by default in administer->content->configure->content types->image configure.

At 12:36 PM, Anonymous Danny said...

artem: Right, that solved the issue for me perfectly!

At 2:22 PM, Blogger dclochri said...

Thus was incredibly useful. I have been having problems with this, and the explanation helped resolve my issue. Thanks.


Post a Comment

Links to this post:

Create a Link

<< Home