Drupal Theme: 
UQ Base Template
Learning Objectives: 

On this page, site editors will find the step-by-step instructions on how to add images into a content page. Site editors should also visit the Creating web images page for information on the technical requirements for web images.

Insert an image

There are two ways to do this; insert an existing image already sitting in the Image browser OR upload an image via the editor.

  1. Position the cursor where the image should be placed.
     
  2. Select the Image icon from the editor menu
    Image icon in editor menu
     
  3. On the dialog window, click the Browse Server button to bring up the Image Browser dialog window.
    Image dialog window
     
  4. Select the image you want to insert, or upload a new image and then select it.
     
  5. Double click the image to add it to the Image dialog window on your page.
     
  6. Write an Alternative Text description of the image so that screen readers and search engines can understand what it is. This is required to meet WCAG accessibility legislation. Visit the Accessibility pages of this website for more information.
     
  7. Click OK to insert the image to the page.
     
  8. PLEASE NOTE: You only need to upload one image. UQ Drupal comes with a set of image styles that automatically crop and resize images to preset dimensions. If you have one image, but you want to display it in various sizes, landscape, portrait or square, you only need to upload one file (the biggest size to be used).

How to use Image Styles

For an example, if there is a banner image that would be too big to insert into your content, you can choose a smaller image style such as "medium square" to use instead. Drupal would crop the image to the image style size before inserting it.

  1. Position your cursor where you want to insert the image.
  2. Click the Image icon in the editor
  3. Click Browse Server to locate your image
  4. Right-click on that image to see the preset image styles available. These are indicated with a green tick beside them.
  5. Click on the style you want to use. This may take a couple of seconds before Drupal inserts the selected image, cropped and sized, into your content.
  6. See all the image styles available.

image styles preview

EXERCISE: Adding images

  1. Go to the Training resources page and download a banner to the desktop. Note: If undertaking Site Editor Training a banner will be already saved in your image browser.
     
  2. Go to the image browser and upload the banner image.
     
  3. Insert an image into your content as a "Medium Square"
     
  4. Insert another copy of the same image but the size we want is "Small landscape"
     
  5. Save your page.

NEXT: File browser