Drupal: Add an Image

Owned by Jonathan Woolson
Last updated: Nov 12, 2024 by Jonathan Woolson
4 min read

The permanent link to this page is https://www.fredonia.edu/drupal/help/add-image

Images must not contain text, unless the text is short enough that it can also fit into the alt text field for the image. If an image does contain fewer than 150 characters of text, then all of the text must be added into the alt text field for the image. All images must have a text description in the alt text field.

Reason: Text included in an image cannot be directly read by search engines or by the screen readers used by visually-impaired visitors. Failing to provide readable text for all visitors is a violation of state and federal web accessibility requirements.

Source: Fredonia Web Standards: https://www.fredonia.edu/web-standards

Do not copy and paste images into a web page. Please follow the steps provided below to upload each image to your website folder, then add it to the web page.

Step-by-step guide

  1. Name the image file according to the Naming Conventions.

  2. In the editor, first select a space to insert your image.

  3. In the toolbar, click the Image button: 

    Add Image button

  4. You may either browse the server, or paste a web link to get your picture.
    To choose an image on the server or to upload a new image from your computer to the web page you are editing, click the magnifiying glass icon on the right to Open File Browser.

    Image dialog with the magnifying glass icon to Open File Browser.

  5. The File Manager window appears. Be sure that your department folder is selected in the left folder list. If the image you want to add to the web page is already uploaded to your files list, just double-click it to select it, or click Select.

  6. To upload a new image, click Upload in the upper left of the File Manager, then click + Add file.

     

  7. Select the files you want to upload from your computer and click Select or Choose (depending on your OS). The file names will appear in the Upload file window.

  8. Double-click on the file name to choose it, as shown in Step 5.

Required for ALL images: Add Alternative Text (alt text field)

  1. Click on the Add Missing Alternative Text message at the bottom of the image or click on the Eye icon in the image editing toolbar, above the image.

Purpose: Alternative text is required to ensure that all images are accessible to all website visitors.

  1. Add the Alternative Text in the field that appears above the image, using text to describe the image which is accuracte, descriptive and brief.

  2. Click the Checkmark to save the Alternative Text.

Optional Steps: Adjust Image Size and Add Caption

  1. Edit the image placement as needed, (size, alignment, etc.) by dragging the blue handles on each corner.

  2. To add image caption text underneath the image, click this icon to Toggle Caption:

     

  3. The Caption field will appear under the image where you can type in your caption text.

     

  4. Save and Publish