The Berkeley Brand guidelines provide standard image sizes for Brand components such as Hero, Photo Thumbnail, and Promo widgets. Stock images are provided in two sizes, primarily for use in the two styles of Hero widgets.
If you have your own images and would like to use them in Brand widgets, for best results you should crop them to the appropriate aspect ratio before uploading (see list below). Otherwise, your images will be automatically cropped and scaled to fit the aspect ratio and size required by the widgets. (Note: Crop values below are initial suggestions; you may find that different crop values for a specific photo will give a preferred display for your target resolution.)
- Text box or Video split hero: Crop to 800px wide by 450px high.
- Landing hero or Image Only hero: Crop to 1200px wide by 450px high.
- Mega Menu image: Crop to an aspect ratio of 1.5:1, with a minimum width of 308px. For example, crop to 308px wide by 205px high.
- Rectangle-style widget (Thumbnail List, Photo Thumbnails, Promo with Image): Crop to an aspect ratio of 1.5:1, with a minimum width of 768px. For example, crop to 768px wide by 512px high.
- Square-style widget (Photo Thumbnails, Promo with Image): Crop to a square, with a minimum width of 768px.
- Photo Thumbnail with Zoom: Photos should have a minimum of 768px wide by 512px high
If the image you'd like to use is in portrait orientation (taller than it is wide), and you can't crop it into square or landscape orientation, see the Brand toolkit's Photoshop templates to transform your image into landscape orientation.