UCSF

Inserting Images

Types

Images

  • Images can be uploaded in a number of formats; however, JPG and PNG tend to be the most common choices.
  • Sizing and optimization is handled by Drupal, so pre-processing is usually not necessary.
  • For best results, use the largest image size available—up to 4,920 pixels wide.

Caution: Most images on the web are not free to use. Make sure you are respecting the copyright, licensing, and attribution requirements of any image you use. Unsure if it is OK to use an image, or have questions about acquiring images? Request support.

Display and placement

In WebEdit

media button
  • Insert images, videos, and files in body, description, and other editor fields by clicking the Media button in the toolbar, or right clicking and selecting "Add/Edit Media".
    • There are three steps you will walk through while adding media: upload (or 'web'), providing crop and metadata (see below), selecting size and placement.

edit file/crop selection
  • Alter an existing image or video by clicking the Media button in the toolbar, or right clicking and selecting "Add/Edit Media".
    • To alter the crop or metadata, click "Edit file / crop" from the pop-up. The file details will load in a new window. (Then save both the file and your page).

Crop styles

  • To alter the cropping of the image, use the built in "Manual Crop" tool.
  • Use "Square Crop" to create a square image.
  • To use the crop tool, drag to create your selection, and then hit "Save".

Size selections

size selections menu
  • "Display As" is the indicator for choosing sizes.
  • Size selections are relative to the full page, regardless of columns and layout.
  • Square sizes should be selected if you chose a square crop or want a squared image.
  • Original and Raw should only be used in special cases.

Wrapping

  • If a wrapping choice ("Left Image", "Right Image") is selected, the content following the image will come up an wrap into the space next to the image.
  • "Clearfix" styles can be used on subsequent content that you don't want to wrap.

In a field

  • Field images are integrated to a content type like the "Person Headshot" or a "News Primary Image".
  • Sizing and position of field-based images is predetermined by the design.
  • The images are used to represent the piece of content in other areas of the site.
  • Additional images can be added to the body/description/bio as needed.

Crop styles

  • You should almost always provide a "Square Crop" selection for images in fields.
  • You can also provide a "Custom Crop" when desired, however this does nothing on People content type Headshots.

Image metadata

Images often need additional information to be added (in provided fields).

Alt text

  • Alt text is intended to help the visually impaired, and other cases where image display is not useful.
  • Treat alt text as required.
  • Alt text should be succinct, and say what the image is so it is clear why it is in the page.

Credit

credit text and link
  • Image credits are often required when using an outside source, or images from a non-UCSF photographer.
  • UC-owned images do not require credit, but it is sometimes given as a courtesy.
  • Use the copyright symbol ©, or abbreviation for a license (e.g. CC-BY), when needed.
  • The optional URL portion of field should be used to link to the original source, or photographer when appropriate.

Caption

  • Captions are optional, and may be long or short.
  • Captions support rich formatting (bold, italic, links, etc.).
  • In some displays (thumbnails, list views, people) captions are hidden from view.

Special cases

When you have a large set of images grouped together—usually three or more—wrap the set of images in a div with class laundry-line and set them to wrap either all left or all right. This ensures that the images are sized and wrapped properly for some mobile devices. Examples: