On this page
- Before uploading
- Don’t use an image unless an image is required
- Choose only images that meet our photography standards
- Choose only images that you created or that you have written license or permission to use
- Obtain written permission from all persons depicted in the image
- Choose the largest image size available to you
- Required: create alternative text for screen reader users
- Upload an image
- Change the properties of an existing image
- Replace an image
- When you have many images
- Allowed file types
- 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.
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.
You are required by University policy and federal law to respect the copyright of others.
Some image libraries available to you include:
- UCSF Brand Photography Library: log in with your MyAccess credentials
- The Archive at the UCSF School of Pharmacy: for access, let us know at Website Support
- UCSF Archives and Special Collections
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.
For best results, use the largest image size available—up to 4,920 pixels wide.
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.
Edit the page to which you want to add an image.
Place your cursor on a new line where you want the image.
Use the Paragraph Format menu to set the paragraph format to Normal.
Select the Add Media button. A dialog appears asking you to upload a new file.
- Find and select the image on your device. The filename then appears in the upload field.
Select the Next button. The image is uploaded, and a new form appears requesting some details about the image.
- Leave the Name field unchanged.
- In the Manual Crop field, if the image can benefit from being cropped:
- Select Custom Crop for a non-square crop.
- Select Square Crop for a square crop.
- In either case, follow the on-screen instructions to crop the image.
- 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.
- 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.
- Required only if the creator of the image requires it: Specify the person’s or entity’s name in the Title field.
- Optional: Specify the person’s or entity’s URL in the URL field.
- Optional: An Image caption section enables you to include a caption for the image that will appear below the image.
- Do not change anything in the URL Redirects section.
- Select the Save button.
- A thumbnail of the image appears with an Edit file / crop link and some local options.
- In the Local Options section:
- Choose a relative size for the image in the Display as picklist.
- If you specified a square crop earlier, choose a size that is preceded by “Square.”
- If you uploaded an animated GIF, select Original.
- Choose whether text will wrap around the image in the Wrapping picklist.
- Left image means the image appears on the left and text wraps around it to the right.
- Right image means the image appears on the right and text wraps around it to the left.
- None means the image will appear on its own line with no text wrapping.
- Choose a relative size for the image in the Display as picklist.
- 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.
Save the page as draft by selecting the Save button at the bottom of the page. The page reloads without the editing interface.
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.
Contact us at Website Support if these steps did not give you a desired result.
- Select the image you want to edit with a single click.
- Select the Add Media button. A Media Browser dialog appears, displaying an Edit file / crop link and some local options.
- 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.
- Select the Save button when done making changes. The page reloads showing the image title and the image without the editing interface.
- Close the current browser tab and return to the previous tab displaying the Media Browser dialog.
- Make any changes you want to the local options, then select the Submit button. The Media Browser dialog closes, revealing the page being edited.
- Select the Save button at the bottom of the page. The page reloads without the editing interface.
Review your changes, and contact us at Website Support if these steps did not give you a desired result.
- Manually record the properties of the image you want to replace.
- Delete the image.
- Upload your new image.
- Set the properties of the image.
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:
- the headshots on Study shows sugar industry buried evidence of health risks
- the sets of three and six images on Pharmacy Alumni Weekend Report
Many examples of using images appear throughout our websites. Simply browse or let us know what example you seek at Website Support.