Activity #3: Images and documents

These instructions assume you are logged into the Health Sciences Drupal Training website. After completing these edits, your page will look closer to the “Dogs - Final Version” page.

Download files to your computer

  1. Navigate to the Google Drive folder
  2. Download the files to your computer’s desktop Screenshot

Add Images

Images are added to Drupal when you use them for the first time on a page. After an image has been uploaded for use on one page, it can be used on any other page of your website.

Add a new image to a webpage

  1. Navigate to your training page
  2. Click on the Edit tab Screenshot
  3. Place cursor in front of the first word in the body field GIF
  4. Click on the Media browser button in the toolbar Screenshot
  5. Click on choose file
  6. Select puppy_exam.jpg from your computer’s desktop
  7. Click Open
  8. Click Next
  9. In the Alt Text field, add the following description without the quotation marks: “Veterinarian examining a Bernese Mountain Dog puppy"
  10. Click Save
  11. Click Submit
  12. Click on the image Screenshot
  13. Select Image Right - 50% from the styles drop-down menu Screenshot
  14. Scroll to the bottom of the page and click “Save”

Add an existing image to a webpage

It is possible the image you want to add to your webpage is already available in your website’s image library.

  1. Navigate to your training page
  2. Click on the Edit tab Screenshot
  3. Within the body field, scroll to the section of the content about Qualities. After the word “muzzle” click Enter/Return.
  4. Click on the Media browser button in the toolbar
  5. Click on the UMN Library tab in the upper right corner Screenshot
  6. In the File name field, type “Stewie” without the quotation marks
  7. Click on Apply
  8. Click on the first image  and click Submit
  9. The alt text already exists because it was added when the image was originally uploaded.
  10. Scroll and click on Submit
  11. Click on the image
  12. Select Image: Circle Image from the styles drop-down menu
  13. Select Image: Right 20% from  the styles drop-down menu
  14. Scroll to the bottom of the page and click “Save”

Add Documents

Many units link to documents (e.g. PDFs, Word documents, or Excel spreadsheets). To do this on your AHC Drupal website, you will complete two separate tasks:

  1. Upload the document to the server via Drupal
  2. Link to the document

For this activity, we are only uploading the document. We will link to the document later in the training.

  1. In the black toolbar, click on Shortcuts (may need to click more than once) to reveal your shortcuts
  2. Click on Find content Screenshot
  3. Click on Files tab Screenshot
  4. Click on Add File
  5. Within the Upload a New File dialog box, click on Choose File
  6. Select dog-document.pdf from your computer’s desktop (you should have already downloaded this file from the Google folder)
  7. Click on Open
  8. Click on Next
  9. Your document will now show up in the list of files (which also includes your image files)