Drupal: How to Insert an Image

Home › How-Tos › Drupal: How to Insert an Image

In this tutorial, you'll learn how to insert an image in 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 have to be signed in to Drupal in order to do this).
  2. After you've clicked the "Edit" tab, scroll down to the "Body" editing box. The editor should resemble the MS Word toolbar somewhat.
  3. Place your curser next to the text / location to where you would like to insert an image.
  4. Click the Image button  A popup should then appear titled, "Insert/Edit Image." Click on the red box to the right of the "Image URL" textbox
      
  5. Another new popup window should appear.  In this popup window, click "Upload" in the upper left hand corner.
      Screen image of CK Editor upload button
  6. A file browser should drop down.  Click the "Browse" button next to the file browser.
      Screen image of editor browse button
  7. Once you've found the image you want to attach, click the "Open" button.  Then click "Upload."
  8. 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 Image Description, in the field below the URL, describing the photo or image. (Ex: Photo of John Smith). Choose desired horizontal or vertical spacing and any alignment in the "Appearance" tab, or leave as the default settings.  When done, click "Insert".
     
  11. Scroll down to the bottom of the page and click the "Save" button.

Congratulations! You now know how to insert an image in Drupal using the Tiny MCE toolbar.