Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

This specific image feature is NO LONGER SUPPORTED in Drupal.

Info

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

Info

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

...

Info

All images added to the website should be JPG, PNG, or WEBP. Please do not upload HEIC images (the image format commonly used by Apple iPhones). Please use an image converter like https://cloudconvert.com/heic-to-jpg before uploading images.

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.

    1) Click Upload. 2) Click the Add File button.Image Modified

     

  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 45.

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.

    Eye icon for alternative text

...

  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.

    Add Alternative Text
  2. Click the Checkmark to save the Alternative Text.

    Link checkmark.

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:

    Toggle Caption

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

    Image Caption appears under the image.

  4. Save and Publish