UCSF

Images

This page describes for web editors in the School of Pharmacy how to upload images in a website built by the Office of Planning and Communications.

On this page

Before uploading

Don’t use an image unless an image is required

  • Is your image relevant and meaningful to the adjacent text? If not, don’t use it.
  • Does your image communicate something that could not be communicated in any other simpler way? If not, don’t use it.
  • Does your image consist of primarily or only text? If yes, don’t use it—use text instead.

Choose only images that meet our photography standards

Thoughtfully crafted guidance on photography is available from UCSF University Relations at Photography Standards. You can also request photography guidance from the Office of Planning and Communications via Website Support.

Choose only images that you created or that you have written license or permission to use

You are required by University policy and federal law to respect the copyright of others.

Some image libraries available to you include:

Obtain written permission from all persons depicted in the image

You are required by University policy to obtain written consent for all identifiable persons in images you use to communicate.

Details: See the Consent Forms item in the Policy section of Brand Photography Library.

For PharmD students, the Office of Student and Curricular Affairs gathers these permissions en masse during Orientation, and this office keeps track of which students have not consented to the use of their image or voice.

Choose the largest image size available to you

For best results, use the largest image size available—up to 4,920 pixels wide.

Required: create alternative text for screen reader users

You are required by University policy and state and federal law to make images accessible to persons with disabilities.

In most cases you meet this requirement by including a brief description of the image at the time of upload. We call this brief description alternative text, or alt text for short. Some tips:

  • When identifying persons, such as in headshots, use the person’s last name only.
  • Do not include “picture” or “photo” or “image” or “drawing” anywhere your alt text. Specify only the brief description.
  • It’s rare for an alt text to be correctly left blank. Not sure? Include alt text.
  • Having trouble writing your alt text? Contact us at Website Support.

Upload an image

Step 1: Specify the file to upload

  1. Edit the page to which you want to add an image.

  2. Place your cursor on a new line where you want the image.

  3. paragraph format menu showing normal selected

    Paragraph Format menu

    Use the Paragraph Format menu to set the paragraph format to Normal.

  4. Add Media button

    Select the Add Media button. A dialog appears asking you to upload a new file.

  5. Find and select the image on your device. The filename then appears in the upload field.
  6. Select the Next button. The image is uploaded, and a new form appears requesting some details about the image.

Step 2: Specify the crop and other data about the image

  1. Leave the Name field unchanged.
  2. In the Manual Crop field, if the image can benefit from being cropped:
    1. Select Custom Crop for a non-square crop.
    2. Select Square Crop for a square crop.
    3. In either case, follow the on-screen instructions to crop the image.
  3. In the Alt text field, specify a brief description that helps screen reader users understand the meaning of the image in this context. See Required: create alternative text for screen reader users.
  4. A Credit section enables you to specify who created the image and, optionally, a URL to that person’s or entity’s website. The image credit is required only for professional photographers who require that we credit their work. Do not include “Courtesy of” or “Provided by” or similar.
    1. Required only if the creator of the image requires it: Specify the person’s or entity’s name in the Title field.
    2. Optional: Specify the person’s or entity’s URL in the URL field.
  5. Optional: An Image caption section enables you to include a caption for the image that will appear below the image.
  6. Do not change anything in the URL Redirects section.
  7. Select the Save button.
  8. A thumbnail of the image appears with an Edit file / crop link and some local options.

Step 3: Select size and wrapping options

  1. In the Local Options section:
    1. Choose a relative size for the image in the Display as picklist.
      1. If you specified a square crop earlier, choose a size that is preceded by “Square.”
      2. If you uploaded an animated GIF, select Original.
    2. Choose whether text will wrap around the image in the Wrapping picklist.
      1. Left image means the image appears on the left and text wraps around it to the right.
      2. Right image means the image appears on the right and text wraps around it to the left.
      3. None means the image will appear on its own line with no text wrapping.
  2. Select the Submit button. A thumbnail representing the image should now appear in the location you specified. The image does not appear in its intended size and wrapping until you save the page as draft.

Step 4: Review

  1. Save the page as draft by selecting the Save button at the bottom of the page. The page reloads without the editing interface.

  2. Review your image insertion. View the draft page at different browser widths to confirm that the image appears as expected for mobile devices as well as laptop and desktop computers.

  3. Contact us at Website Support if these steps did not give you a desired result.

Change the properties of an existing image

  1. Select the image you want to edit with a single click.
  2. Select the Add Media button. A Media Browser dialog appears, displaying an Edit file / crop link and some local options.
  3. Select the Edit file / crop link. A new tab opens in your browser enabling you to change the crop and other data about the image.
  4. Select the Save button when done making changes. The page reloads showing the image title and the image without the editing interface.
  5. Close the current browser tab and return to the previous tab displaying the Media Browser dialog.
  6. Make any changes you want to the local options, then select the Submit button. The Media Browser dialog closes, revealing the page being edited.
  7. Select the Save button at the bottom of the page. The page reloads without the editing interface.
  8. Review your changes, and contact us at Website Support if these steps did not give you a desired result.​

Replace an image

  1. Manually record the properties of the image you want to replace.
  2. Delete the image.
  3. Upload your new image.
  4. Set the properties of the image.

When you have many images

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 mobile devices. For help with this, contact us at Website Support. Examples:

If you have a site on pharm.ucsf.edu, you can also include sets of images using a Gallery or Slideshow.

Allowed file types

Filename extension

Description

gif

Graphics Interchange Format

jpeg, jpg

JPEG

png

Portable Network Graphics

svg

Scalable Vector Graphics

webp

WebP

Examples

Many examples of using images appear throughout our websites. Simply browse or let us know what example you seek at Website Support.