Breadcrumb

Adding Images and Files to a Web Page

A new web file manager has been introduced in Drupal for adding images and other kinds of web files (e.g. PDF) to a page.

NOTE!! This page had not been fully updated for Drupal 8 yet.  The UI for adding an image in particular is different.  We are working on changes that should be in place soon.  

Adding an Image to a Page

  1. Position you cursor in the web page editor where you want to place the image and press the image icon in the editor toolbar.
    Press image icon in editor to add image to file
  2. Click the Browse Server button to select the image file. 
    Browsing to file to add
     
  3.  Once the browse dialog appears, click the website folder where you want to store the image file. It is recommended that images be stored in the folder associated with the website where they are being used rather than a user's individual folder.
     
  4. Press the upload button and then press the "add file" button. Use the file browser to select the image file.Browsing and selecting file for upload
     
  5. Once you have selected a file, you must press the upload button to actually upload the file into the folder
    Final upload of file into folder
     
  6. Now double click on the image file to add the image into the web page
  7. Once the image is selected, finalize the parameters and press OK to add the image into your page.  It is very IMPORTANT to include an alternative text description of the image.  This is required for web accessibility so that web content can be made available to everyone including people with disabilities.
    Submitting image and adding to page.
     
  8. Press the save button to save the changes to the page
    Press save button to save the changes to the page

 


Adding a Web File to a Page

Adding a file such as a PDF to a web page is a very similar process.  It uses the same file manager tool.

Important Things to Consider with Respect to Web Files

  • It is a much better idea when possible to place your content directly in web pages rather than using web file formats such as PDF. Web content can be properly displayed on most computing devices including mobile devices.
  • You should avoid using document types like MS Office documents for accessibility reasons.  These should only be used in limited situations where you can be sure your audience has access to the required software.  File formats like PDF are more ubiquitous and available on most computing devices.

Steps

  1. Open the page for editing and click the "Insert Files" button in the toolbar
    Press Add Files Button to insert a file into a web page
     
  2. Use the same steps described above for images to add the file.  Press "Upload->Add File".  Browse to your file and select it. Then press the open button.
  3.  Press Upload button to upload your file into the selected file manager folder.
    Press Upload Button to upload file into file manager folder
     
  4.  Select the file by double clicking on it's icon within the folder.  This will generate a hyperlink in the page pointing to the file.
    Double click on file within folder to select it and generate hyperlink in page
     
  5. Save the page to finish. Now your page will have a hyperlink pointing to the file you added.
    Save the page to finish.

Use of Subfolders

When uploading photos or files, it is important to use the subfolders within the file manager to organize files. This will make them easier to find in the future, especially if they are specific to a department or topic.