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 CK Editor.
(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.
    Screen image of editor toolbar
  3. Place your curser next to the text / location to where you would like to insert an image.
  4. Click the Image button Image button A popup should then appear titled, "Image Properties." Click on Browse Server.
       Screen image of CK editor browse server button
  5. Another new popup window should appear.  In this popup window, click "Upload".
      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 a green checkmark).
      Screen image of CK insert file tool
  10. Add Alternative Text, 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, or leave as the default settings and when done, click "OK".
      Screen image of adding images
  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 CK Editor toolbar.