How do I add an image to a node?

Before You Start...

You will want to ensure that your images are properly prepared.

  • No spaces in file name.
  • Image is optimized for the web.

To embed an image into a Drupal node, do the following:

  1. Within your text editor, click your mouse at the point where you would like to insert the image. The cursor should immediately show there.
  2. Click on the Insert/Edit image toolbar button (the tree). This will open the Insert/Edit image dialog box, which contains three different tabs
    1. General tab - This tab contains some important elements that impact both users with disabilities and search engine ranking. Do not bypass this information. This tab contains three fields:
      1. Image URL field - This is where the link to your image must go. Next to the field is the Browse icon - this is what connects you to the file browser and automatically sets a link for you. Click it to go into the file browser.
        1. Select the image you would like to embed by clicking on it.
        2. Click the send to tiny mce link at the top of the file browser.
        3. The file browser will close and you will be redirected back to the Insert/Edit image dialog box. The Image URL field will be automatically filled
      2. Image description field -This field contains what is known as Alt Text (alternative text). It is a very important field in regards to both accessibility and search engine optimization. This field should hold a meaningful, yet brief, description of the image. If the image, for whatever reason, can not be displayed, the alt text will show in its place.
        1. If you do not fill out this field, you will receive a warning when you try to embed or update the image.
      3. Title field -This field will provide a "pop up" caption/tool tip when a mouse is hovered over it. Title tags are also looked at by search engines, so it's a good practice to include one.
    2. Appearance tab - The appearance tab is where you set all properties related to your image. This includes things such as resizing the display and setting the space around your image.
    3. Advanced tab - The advanced tab is for advanced settings. Only advanced users should modify these settings.
  3. Once you have completed adding your settings, click the Preview button. If satisfied with the preview, click the Save button.