How to add or upload an image to a Drupal site

Images can easily be uploaded to Drupal pages, blogs, FAQ's and blocks but the instructions vary depending on your Drupal configuration, Drupal modules installed, theme design and age of Drupal site.  The set of instructions below are listed based on the latest techniques (first) to the most basic image uploading (last). 

Image Field

If your site has an upload image field or fields in the page creation area, images can be uploaded to specific parts of the page determined by the designed Drupal theme.  The image field would be below the Body area of the page.  If you don't have this field then move to the technique below.  Images will be uploaded, sized, and placed according to the design of the themed page.

Insert / Edit Image Upload

In the body of the page with the rich-text editor turned on, there should be an Insert / Edit Image button. The following instructions are written for the Firefox browser only.

  • Select the location in the text where the image is going to be inserted.
  • Click the Insert / Edit Image button
  • Image Properties window will display
  • Click Browse Server
  • The file Browser window takes you to the files already uploaded to the web server.  If your image is already uploaded from another page or place in your website you can navigate to it from here.
  • Click Upload from the top navigation in the File Browser window
  • Click Browse
  • Navigate your desktop computer and select the image file to upload
  • Click Upload
  • Your file is uploaded and will display in the bottom right corner of the file browser window
  • Click the file image that is being displayed
  • The Image Properties window should now be in view again with the URL location of the image uploaded
  • Type in the Alternative Text
  • Adjust the Width or Height (ratio locked) to approximate size
  • Select Alignment (Left or Right)
  • Other image settings are skipped (Border, HSpace, VSpace, Link, Advanced) and saved for advanced or specific uses
  • Click OK to insert the image into the page.
  • The image inserted can be resized or moved (No instructions here) in the Body area

File Attachment Method

If your site doesnt have a "Browse" option then you can add an image by using the file attachment method. However you may want to have your site upgraded to one of the better image management processes above.  This is especially important when working with Blocks or content types that do not have a rich-text editor.  Follow the instructions below to add an image using the File Attachment Method. Below the Body of the page:

  • Scroll down to the File Attachments (almost to the bottom of the page settings)
  • Click File Attachments if the tab is not open
  • Click Browse next to "Attach new file:"
  • Navigate your desktop computer and select the image file to upload
  • Click Attach
  • Uncheck List to be sure the image is not attached and displayed at the bottom of the page
  • Copy the full url below the Description field. Example http://www/nu-designs.com/files/filename.jpg
  • Scroll up to the Body section of your page
  • Select the location in the text where the image is going to be inserted.
  • Click the Insert / Edit Image button
  • Image Properties window will display
  • Type in the Alternative Text
  • Adjust the Width or Height (ratio locked) to approximate size
  • Select Alignment (Left or Right)
  • Other image settings are skipped (Border, HSpace, VSpace, Link, Advanced) and saved for advanced or specific uses
  • Click OK to insert the image into the page.
  • The image inserted can be resized or moved (No instructions here) in the Body area