Working with Images in the Editor (non-Primary Images)

Table of Contents

Note: For information regarding full-width images that appear at the very top of a page, see Primary Images .

Getting Started

This article refers to working with Images with the Copy Editor

  1. Place you cursor in the location where you would like to include the image

  2. Find and click on the Image icon in the Copy Editor Toolbar 

  3. This will open the Image Properties window.


    A screenshot of the Image Properties pop-up used for configuring an image in the Drupal's Copy Editor.
  4. Click the Browse Server button to launch the file browser. From here you will either Upload a New Image or Use a Previously Uploaded Image.

Upload a New Image

  1. Click on the Upload button in the upper-left of the file browser window.

  2. Choose your image and click on the Upload button pictured below.

  3. The newly uploaded image will appear in the lower portion of the file browser. Click the Insert File button to place the image in the body copy.

Use a Previously Uploaded Image

  1. Use the column on the right to choose the image you'd like. 

  2. Click on the image to have it highlighted in blue. A preview of the image will appear in the lower portion of the file browser. 

  3. Click the Insert File button.

Finalizing the Image Properties

  1. Be sure to add Alternative Text to the image. This text should be succinct and descriptive. Imagine you are describing the image to someone over the phone. IMPORTANT: Alternative Text is primarily used as to provide contextual information to visitors making use of assistive technologies like screen readers. For additional information visit Alternative Text at WebAIM

  2. Optional: Width & Height can be adjusted if necessary, however it may be best to resize the image prior to uploading. All values are measured in pixels (px).

  3. Optional: If you'd like to include an image Border, place the border width value in this field (px).

  4. Optional: If the image will be wrapped by text, you may wish to set the HSpace & VSpace values to 10. This will provide a padding of 10px on all sides of the image

  5. Optional: Set the alignment of the image to Left or Right to have the text wrap to the opposite side of the image, otherwise the image will sit on it's own with the text resuming below the image.

Ways you can contact ITS or find information:

ITS Support Portal: https://support.swarthmore.edu
Email: support@swarthmore.edu
Phone: x4357 (HELP) or 610-328-8513
Check out our remote resources at https://swatkb.atlassian.net/wiki/spaces/remote/overview
Check our homepage at https://swarthmore.edu/its