How to Upload an Image to a Web Page

Before you begin you should have

  • A website on the SF State Drupal platform

  • A web page(s) developed on the site

  • The image that you would like to upload either saved on your computer or accessible through an external hard drive that you connect to the computer

How to Upload an Image to a Web Page

  1. Log in to the Drupal website on the SF State platform
  2. Select the web page where you would like to upload the image
  3. Select the Edit tab
     drupal editor navigation with Edit circled
  4. In the Body section, place your cursor in the content area of the rich text editor where you would like to insert the image
  5. Select the Image icon in the rich text editor menu bar
    Note: If you hover your mouse cursor over an icon in the menu bar, it will display the name of the icon.  ck editor menu bar with Image icon circled
  6. Select the Upload tab

  7. Select the Browse button and navigate to the image
     image dialog box with an URL label input text box and browser server button circledNote: The title of the button may vary between Internet browsers.
  8. Select the image that you would like to upload and then click theOpen button
     dialog window with image icon files with open dialog button circledNote: The title of the button may vary between Internet browsers.
  9. Select the Send it to the Server button Image properties dialog box menu bar with Insert file circled
  10. Complete the appropriate fields in the Image Properties box
     Image properties dialog box with URL labeled input field repopulated with a urlNote: Please view the Image Properties Field Descriptions below for definitions of each of the fields. The fields labeled with an asterisk (*) should always be completed.
  11. Select the OK button image dialog box with an URL label input text box and browser server button circled
  12. Select the Save button located at the bottom of the web page

The image should now be displayed on the web page.