Inline Images With Drupal

MustardSeed Media did a great video screencast on setting up inline images in Drupal, in a forward-thinking way. I found myself referring to the video over and over again, so I decided to write up the main points of it for quicker reference. If this is your first time trying to set up someting like this, I defintely suggest you start with the video.

Modules Used

• Filefield (part of Drupal 7 core)
• Imagecache (part of Drupal 7 core)
• Image (part of Drupal 7 core)
• Insert
• Image Resize Filter (gives ability to drag and resize in the body of the page, optional)
• WYSIWYG

To configure:

• In your content type, add a CCK image field.
• When configuring the field, there's a new section of options called "Enable insert button" (D7) or "HTML insert" (D6). Check the box to enable it, and then check the subsequent boxes for the imagecache presets that you want to make available when inserting in the body of a page.
• In the input format settings, enable the "image resize filter" ("convert media tags to markup").
• In content type > display settings, hide the inline image field so it doesn't show up twice.

For the end-user to use:

• Place cursor in the body, in the place where you want the image to appear.
• Go to the "inline images" section and upload the image file.
• Choose the desired size, assign a title and alt tag if appropriate, and click "send to text area" (D6) or "insert" (D7).