Add and Edit Images in Drupal

Occasionally, you may wish to add an image to the body of a page, news story, event, etc.

This page explains how to add new and existing images, resize images, caption images and change their alignment or text wrapping directly in the Drupal content-editing panel.

Upload a New Image

1. In the editing panel of the page, news story or event, place your cursor where you’d like the image to go. Select the Add Media function (the tiny square that looks like a picture of mountains).
   
2. In the Upload tab, select Choose File.
3. Follow the prompts to find the image on your computer. When you find the file, double-click on it.
4. Click on the Next button.
5. If the image is not purely decorative, enter a description of the image in the Alt Text field, then click Save. (Leave the Title Text field blank.)
   
6. You will be taken to a confirmation page with a preview of the image. Click Submit.
7. The image will be placed exactly where your cursor was located.

Insert an Existing Image

1. In the editing panel of the page, news story or event, place your cursor where you’d like the image to go. Select the Add Media function (the tiny square that looks like a picture of mountains).
   
2. Select the Library tab.
   
3. Find the image in the library. You can search for the file name by entering a term in the File name field, then selecting Apply or pressing Enter on your keyboard.
   
4. Click on the image to select it. You will see a blue box around the image you selected.
   
5. Press Submit at the bottom of the window. You will be taken to a confirmation page with a preview of the image.
   
6. If the image is not purely decorative, enter a description of the image in the Alt Text field. Leave the Title Text field blank.
7. Click Submit.
8. The image will be placed exactly where your cursor was located.

Resize an Image

After inserting an image in the page (following the instructions above to Upload a New Image or Insert an Existing Image):

1. Save or Publish the page if you haven’t done so already.
2. Edit the page again.
3. Right-click on the image you’d like to resize, then select Image Properties.

4. In the Width field, enter your preferred new width. (The image size ratio is locked by default, so when you enter a new width, it will automatically resize the height to maintain the same ratio.)

5. Press OK.
6. Scroll to the bottom of the page and select Save.

Add a Caption to an Image

After inserting an image in the page (following the instructions above to Upload a New Image or Insert an Existing Image):

1. Save or Publish the page if you haven’t done so already.
2. Edit the page again.
3. Right-click on the image you’d like to caption, then select Image Properties.
   
   
4. Check the box beside Captioned image, then press OK.
   
5. You’ll now see the image again, this time with “caption” written beneath it. Delete the word “caption,” then paste or write your intended caption in the same area.
   
6. Save the page.

Change an Image’s Alignment or Text Wrapping

After inserting an image in the page (following the instructions above to Upload a New Image or Insert an Existing Image):

1. Save or Publish the page if you haven’t done so already.
2. Edit the page again.
3. Right-click on the image whose alignment you’d like to change, then select Image Properties.
   
4. Select your preferred alignment:
   
   • None: The default option. This means the image will be left-aligned, but any text beneath it won’t wrap around it.
   • Left: Left-aligned, with text wrapping.
   • Centre: Centre-aligned, no text wrapping.
   • Right: Right-aligned, with text wrapping.
5. Save the page.