Adding and Editing ImagesOLD

Images can be added to Drupal content pages in two ways:

  • Image Field: Used to place images in specific locations for certain special types of content (e.g. News and Kudos, Staff Listings, etc).

  • Body Field: Used to place images within the body of pages. This is probably the more common use for most page editors.

Image Field

  1. On the edit screen scroll to the Image Media section and click on the Add Media button. This should open the Media Library window.

  1. If the image is new click on the Browse button in the Add file section at the top.

You may want to tag the image to a site. You can do so by clicking on the edit button next to the image.

  1. If the image already exists, search for it by typing the name of the image in the Name field and click Apply Filter.

  2. Select your image and then click the Insert Selected button at the bottom of the window.

Body Field

  1. Click the Insert From Media Library icon on the toolbar. The icon resembles an image with a musical note. This should open the Media Library window.

  1. If the image is new click on the Browse button in the Add file section at the top.

You may want to tag the image to a site. You can do so by clicking on the edit button next to the image.

  1. If the image already exists, search for it by typing the name of the image in the Name field and click Apply Filter.

  2. Select your image and then click the Insert Selected button at the bottom of the window.

 

Editing/Remove Image in Image field

Click the X on the top right corner of the image and repeat the steps in the Image Field section

Editing Image in Body Field

Click on the image. A tooltip with various options pops up.

 

  • Caption: The first icon adds descriptive text and/or photo attribution below the image. If you add a caption describing the image, leave the alternate text field blank.

  • Link media: The second icon allows for linking the media to another url, acting as a hyperlink.

  • Alternate Text: The third icon. Describe the image in a few words so that users with disabilities may understand what is in the picture. If the image is purely decorative and does not add meaning to the content, leave this field blank.

  • Display/View Mode: Select the display option (small, medium, large, thumbnail, etc).

  • Alignment: Choose different alignment options based on your use case. The default is to align left.