The first step of adding an image to a block is to get the image on your web server so that you can reference it in a block. There are a number of ways of adding an image to your web server, either using a FTP program and upload the image to a specific directory or using a module that helps you add images to your Drupal web site. The important thing to keep in mind is knowing where exactly the image is located on your web server. If you do use FTP and upload and image to a directory on your web server, you’ll need to provide the full path to the where the image was uploaded.

An extremely simple to use module that you can use with your Drupal web site is the IMCE module. The IMCE module is located at http://drupal.org/project/imce IMCE is an image/file uploader and browser that supports personal directories. Using the IMCE module you can upload jpg, png, and gif images to your Drupal web site and use the uploaded image(s) in blocks and nodes of all types.

Once you have installed the IMCE module for your Drupal web site goto the IMCE settings page located at Administer > IMCE settings - the clean URL is admin/settings/imce In the first field on the IMCE settings page, Enable inline image/file insertion into plain textareas, add edit-body - this will make IMCE available to most body text fields in Drupal (e.g., story, page, blocks). Click the Save button at the bottom of the IMCE settings page.

Now it’s time to create a new block and add your image to it. Goto the block configuration page located at Administer > Blocks – the clean URL is admin/build/block. Click on the Add block link at the top of the page. You’ll see two links at the bottom of the body text area box:

Insert image or link. Clicking on the image link will open the IMCE window which allows you to upload and select images and then add them to the body of your nodes and blocks.

NOTE: It is important to select the Full HTML option under Input format so that your image will display properly.