Drupal: Insert an Image

In this tutorial, you'll learn how to insert an image into your Drupal webpage using the Tiny MCE toolbar.
Click on thumbnails for a larger view.

  1. First, find the page you wish to edit and click the Edit tab.  (Note: You will need to log in to the website in order to do this.)
  2. After you've clicked the Edit tab, scroll down to the Body editing box. The editor will resemble the MS Word toolbar somewhat.
    Graphic - How to insert an image or link
  3. Place your cursor next to the text where you would like to insert an image.
  4. Click the Insert Image button.    The pop-up Insert/Edit Image will appear.
  5. Click on the red and blue box to the right of the Image URL textbox.
      
  6. Another pop-up window will appear. In this pop-up, click Upload in the upper left-hand corner.
      Screen image of CK Editor upload button
  7. A file browser will drop down; click the Browse button next to the file browser.
      Screen image of editor browse button
  8. Once you've found the image you want to attach, click the Open button, then click the second Upload. The file should now appear in the File Name listing.
      Screen image of file name and file browser for CK editor
  9. Finally, click on Insert file next to the green checkmark.
      Screen image of CK insert file tool
  10. Add an Image Description/Alt Text, in the field below the URL, describing the image. (Ex: Photo of John Smith). Choose desired horizontal or vertical spacing and any alignment preferences in the Appearance tab, or leave as the default settings: 0/not set.  When done, click Insert.
     
  11. Scroll down to the bottom of the page and click Save.

Congratulations, you now know how to add an image to your Drupal website!

E-mail webmaster@egr.msu.edu if you have any questions, need assistance with logging into your website or if any one of these tools/windows do not open for you.