Add, click / drag resize images in your Drupal posts

Drupal version: Drupal 6.x

In the previous article we have added a WYSIWYG editor to our Drupal installation. However we still don’t have a solution to add images to our posts. And why not to have a way to resize our images on the fly, using the click and drag feature. In this article, we will learn just that!

Setting up the image upload kit

This modification will be a bit heavy weight, though. We will start by downloading a series of modules, namely: Content Construction Kit, FileField, ImageField, Image resize filter, Insert and MimeDetect.

Once we have upzipped and uploaded all the files to /sites/all/modules, we will activate them as usual by going to admin/build/modules (Administer > Site building > Modules). However, we will see that for Content Construction Kit (CCK), there are a series of modules listed. We are going to activate only Content, FileField and ImageField from that bunch.

We will now visit Administer > Site configuration > Image toolkit (admin/settings/image-toolkit) and set the JPEG quality at 100% if it’s not done yet.

Once done, we will go to Administer > Content management > Page and Administer > Content management > Story and will repeat the following in both places. We are having rendez-vous at admin/content/node-type/page/fields and admin/content/node-type/story/fields. We will now go one step inside after clicking at manage fields.

We will see an add new field form at the end of the page, and will choose Select a file type > File and Select a widget > Image. We will also add a label to the new field, say Image, and a name to the same, say (field_)image. We save the page.

In the next page, we fill up Permitted upload file extensions: I normally put png, gif, jpg, jpeg but do as you are comfortable with here. I then put both Maximum and Minimum resolution for Images as 0.

I enable custom alternate text at ALT text settings and then on the Insert block, I select Enable insert button.

In Global settings, I put Number of values: at unlimited and leave the two next buttons Disabled.

Once saved, I drag up the newly created Image field up, just below the title, in page admin/content/node-type/page or story/fields. Click the associated Configure link next.

Click on the Display fields tab at the top, and click on exclude, twice under Basic and once under RSS. As I do, of course I don’t forget to save the pages.

Uploading image for Drupal posts

Okay, we have just finished one of the most tricky initial installations of Drupal. Hope there were not much bugs coming till here, and I could explain you properly. We will now create real posts, will upload and resize image using our newly installed modules. Let’s say we are going to create a Drupal page.

Let’s go to Create content > Create Page. We have the above screen with us at this moment.

Okay, now let’s expand the Menu Settings, add a Title and Menu link title (they do not need to be the same), and upload an image. We have the page somewhat like this now.

Let’s do some smart work now. Click on the insert button just above the Alternate Text.

By scrolling down, we will see that a copy of the uploaded image has been inserted inside the text area.

At this moment, we can click the image to select it, and can drag to resize, holding any of the sides with a mouse click.

While the image still selected, we can do other formatting, like we can click on the image format icon (1), go to the Appearance tab (2), set the Alignment (3), vertical and horizontal spaces (4). We Update the popup window to set the image style as we want.

We can then add text, add more image, and format the page using the combination of the Image uploading kit and the WYSIWYG tool, as we want.

So that’s it for this article. Till you digest this one, I am going to write other interesting articles on initial Drupal setups. Well well, we are not yet into writing custom modules for Drupal, or recoding Drupal’s core files! Let’s wait for sometime for that !!! Best,