Overview
Images can be added to all pages on an Open Berkeley website, either directly in a content item (such as a Content page, News item, or FAQ item), or added to a customized page (such as a Landing page, or other content types that can be customized) using a variety of widgets and organized by layout.
The below process outlines how to upload an image using the editing toolbar on a Content page. You will follow similar steps to feature images on other content items, and when adding images using widgets.
Important notes
- Do not copy and paste images. Copying and pasting image data from your clipboard, i.e., copying and pasting images from Google Docs, emails, etc., into the editing field and saving the page will result in multiple megabytes of image data ending up in the database and causing an error and/or affecting site performance. To include an image in your site, please follow the below process for adding images.
- Large (high resolution) images may cause performance issues and could possibly cause other site errors. Try to only upload photos that have a file size of 1MB or smaller, especially when selecting the "original size" option (see below embedding instructions).
- If any edits need to be made to image files, make these edits before uploading to your site (using an external photo editing tool such as Photoshop).
- Some widgets require certain aspect ratios for optimal display. For more information, see Image Shapes and Sizes.
- Be sure to consider accessibility! Do not display text on images, except for logos or other images where a specific display of the text is essential. And always add alt text.
How to upload images
You can upload images to the website pages via the "Add Media" button in the editing toolbar:
Click "Choose File" and browse to where your image file is located, then click "Upload," then "Next." To cancel, click the "X" in the upper right corner of the window:
Alternatively, you can upload a photo from an external site using a web URL. To do so, select the "Web" tab, then copy and paste the image URL:
Once you've uploaded the photo, click "Next" again, or click "Remove" if applicable:
You will then be prompted to change the name of your image if desired (otherwise, just leave as is), as well as add alt and title text for your image.
- "Alt" text is used by screen readers and search engines (for more information on alt text, see "Include proper alt text for images" in the "Top 10 Tips for Making Your Website Accessible" page for more information). If the image is purely decorative - for example, a separator or a bullet - and is not used as a link, you should leave the Alt Text field empty.
- IMPORTANT NOTE: If you will be adding links to any images (either internal or external links), adding alt text is a requirement. Otherwise, screen readers will read the name of the image file (such as image.jpg).
- "Title" text will show up to users when they hover over the image.
Hit "Save" once you've finished adding your alt and title text. You will also have the option to crop your image by clicking the "Crop" button. Click "Save" when you're done.
From here, you can select the appropriate image size. For the most predictable results, we typically recommend selecting one of the following options:
- Width 100: For an image width of 100 pixels
- Width 200: For an image width of 200 pixels
- Width 300: For an image width of 300 pixels
- Width 400: For an image width of 400 pixel
- Original Size: If you want to use the exact size of your uploaded image
When you've selected your image size option, click "Submit."
To make adjustments to the image once it has been added, simply select the image and click the "Media" button in the editing toolbar.
To select and insert an image that you have already uploaded, click the "Media" button in the editing toolbar, then select the "Library" tab, select the desired image, and click "Submit."
To align images with text, select the image or text and use the align buttons (Align Left, Align Center, or Align Right) on the editing toolbar.
Campus Photos and Use of Copyrighted Materials
- The Berkeley Brand project provides a toolkit that includes a model release form (in English and Spanish) on their Downloads page.
- They also have some information about the style choices provided in the gallery, which will help with consistency if your mix of photos will include some from the gallery - see http://brand.berkeley.edu/photography/.
- If your photos will include iconic or trademarked campus logos or landmarks, review the Business Contracts and Brand Protection site's information at http://bcbp.berkeley.edu/brand-protection/media.
- UCOP has a copyright website: http://copyright.universityofcalifornia.edu/use/index.html. Many of their resources are geared toward the use of copyrighted materials in the classroom, but there are some basic guidelines here that may be useful.
- For further questions, contact the Office of Public Affairs (http://publicaffairs.berkeley.edu/).