Inserting an Image into a Document in Drupal

These instructions are for anyone who is using the OIT instance of Drupal.

  1. In a Web browser, open the document in Drupal that you want to work with.
  2. Click on the Edit tab. If this tab is not visible, log in to WRAP.
  3. Place the cursor in the document where you want to insert the image.
  4. On the menu bar, click on the Insert/edit image icon (green tree).

    Insert/edit image icon

  5. In the Insert/edit image window, click on the browse button (beside the Image URL text box).

    Insert/edit image window

  6. In the File Browserwindow, navigate to one of these folders:
    • the folder in Drupal that already contains the image you want
    • the folder in Drupal where you will put the image after you get it from outside Drupal
      If you don't know this folder's location or need to have a new folder created, ask a Drupal administrator.

      File Browser window

  7. If the image you want is already in the folder, skip to Step 11.
    If the image is not already in the folder, click on the Upload link on the menu bar at the top of the window and continue to Step 8.

    Upload link

  8. In the panel that opens just below the menu bar, click on the Browse button.

    Browse button

  9. Browse to the folder outside of Drupal that contains the desired image and select it. The path to the image will appear in the File text box.

    Name showing in File box

  10. Click the Upload button below the File text box (NOT the Upload link on the menu bar).

    Upload button

    The name of the uploaded image will appear at the bottom of the list of file names, and the image will be displayed at the bottom of the window.

    List showing uploaded file

  11. Click on the file name of the image.
  12. On the menu bar at the top of the window, click on the Send to tinymce link.

    tinymce link

    The path to the image will appear in the Image URL box in the Insert/edit image window that opened in Step 5. 

  13. In the Image description box, type a word or short phrase that indicates what the image shows.  This will form the alt text for the image and is required for accessibiity.
  14. Click on the Insert button at the bottom of the window.
    Insert button

    The image will appear at the place in the document where you had put the cursor in Step 3.