Photo Thumbnails

  • This feature aligns with the Public Affairs branding guidelines.
  • Additional color options sponsored by People & Culture (feature enhancement).
  • Large (high resolution) images may cause performance issues and could possibly cause other site errors. If you are uploading your own photos to use for Photo Thumbnails, try to only upload photos that have a file size of 1MB or smaller.
  • For photo/image best practices, see Image Shapes and Sizes.

Photo thumbnails allow Site Builders to add a widget containing a photo with a color band (all Berkeley Brand colors are available) added to the bottom of the photo. These Photo Thumbnails are meant to link to either internal or external content.

Photo Thumbnails can be used on your home page, and any other pages where you can add widgets (Content Pages, Landing Pages, News items).


  • Photo Thumbnails are meant for thumbnail-sized regions. They will not expand to fill the width of regions wider than 540px. They work best in narrower regions, i.e., with layouts that contain three-column and four-column options (such as Brown, Hewston, Muir, Pond, or Telegraph), or with layouts that contain narrower sidebar regions (such as Bartlett, Brenham, Bryant, Burr, etc.).
  • There are two shape options available for the image in a Photo Thumbnail: Square and Rectangle. When uploading a new photo or choosing an existing one to use with your Photo Thumbnail, the photo may be cropped to fit the appropriate aspect ratio of these shapes. For more information and tips, see Image Shapes and Sizes

To add a Photo Thumbnail, click "Customize this Page," click the plus sign in the region where you'd like to add the photo thumbnail, then select "Berkeley Components."

Then, click "Add" for "Photo Thumbnail."

From here, configure the Photo Thumbnail. Select a color, browse to select a photo (use an existing photo from your photo library, or upload a new photo), choose either "Square" or "Rectangle," add photo credit if applicable, add the text to accompany the thumbnail (required), add a link to accompany the thumbnail (required).