Working With Images and Media

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,000 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. If you are unsure if it is OK to use an image, or have questions about acquiring images, request support.

Videos

video embed

  • Videos from YouTube and Vimeo can be added to your page by selecting the "Web" tab (see Display and Placement) instead of uploading a file.
  • Videos are displayed as embedded players at half size and larger, and as clickable preview images otherwise.
  • Videos only have a description field as metadata.

Files

  • Links to files such as PDFs, Word Docs, and ZIP files can be inserted into a page.
  • Upload as you would an image, sticking with default options.
  • File will display as a small icon with filename.
  • Files cannot be manipulated once inserted.

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.
    • Switch to the "Web" tab to add a video. Existing files can be located under "Library" or "My Files" but this is not recommended.

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".
    • If you need 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

  • If you wish to alter the cropping of the image, you can do so using the built in "Manual Crop" tool.
  • Use "Square Crop" if you plan on using 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.