Drupal: Upload an Image and Add it to a Page

There are several ways to add images to a page. These instructions are for contributors who need to add an image within a field that has the HTML editor toolbar.

Directions

  1. Click Menu in the Administrator toolbar.
    Drupal administrator toolbar. The Menu option is highlighted. 
     
  2. Click Content in the Menu toolbar.
    Screenshot of the first part of the menu toolbar. Content is highlighted.
     
  3. Use filters, if desired, at the top of the Content page to locate the page you want to edit by entering Title, Type, Author, Published status (Yes or No), or Vocabulary and clicking Apply.
    Drupal content filters include Title, Type, Author, Published, and Vocabulary.
     
  4. Click the page title link in the Title column for the page you want to edit.
    Screenshot of the Content page with the Title column highlighted.
     
  5. Click the Edit Draft tab.
    Page/Node tabbed menu. The tabbed menu includes View, Edit Draft, Revisions, Convert and Panelizer. Edit Draft is highlighted.
     
  6. Place your cursor in the content field where you want the image to display.
  7. Click the Add Media icon in the HTML Editor toolbar.
    The Add Media icon in the HTML Editor toolbar.
     
  8. Click Choose File.
  9. Select the image you wish to upload in the dialog box.
  10. Click Upload.
  11. Click Next.
  12. Enter a descriptive phrase or sentence to the Alt Text field (important for accessibility).
  13. Add one or more descriptive tags, if desired, in the Tags field.
    • Tags will help you organize your files as your library of uploaded images, documents, and other media grows.
  14. Fill in any additional optional fields as needed.
  15. Click Save.
  16. Select your desired display size from the Display as drop-down menu.
    Media Display As drop-down menu.Options include Original Size, Quarter Size, Thumbnail, and Link.
     
  17. Click Submit. You should now see your image added to the content field.
  18. Click Publishing Options in the bottom left corner.
    Drupal Content sub-menu. Content sub-menu includes Meta tags, Scheduling options, Authoring information, and Publish options. Publishing options is highlighted.
     
  19. Choose the publishing state from the Choose an action drop-down menu (required).
    Drupal publishing actions menu. The action menu includes Draft, Needs Review, and Published. Draft is highlighted.

    • Draft: This state keeps the page private. You can keep working on the page without having the public see it.
    • Needs Review: This state keeps the page private, but flags the page as ready for editing.
    • Published: This state makes the page public. Publishing a page will also make it viewable in any menus or automatic lists (aka views) that might reference the page.
       
  20. Enter a message to state your changes in the Log message for this state change field.
  21. Check the Create new revision checkbox.

    Create new revision checkbox.

    Note
    : This checkbox should automatically be checked. If it isn't, check it.

  22. Click Save. You should now see the new image on your site.

Additional Information

Use the Word - HTML converter to avoid dirty web source and messy markup code!

TDX ID
3476