Website Graphics
Banners
Banners
Banners (also known as the "hero") can occupy most of the top area of our different content types. They are a highly visible design feature to visually enhance the content and its presentation, but it is optional. A page can exist without a banner. Banners can be added to: landing pages, basic pages, articles, events, webforms and profiles.
Banner "Slides"
Slides and banners are optional components that share the same place and dimensions. Slides place a black translucent overlay rectangle with a headline, blurb and a link button. This component is used to feature specific content on your website.
Banner & Slide Dimensions
We recommend using images with the 16:9 aspect ratio. This translates to a maximum size of 1920x1080 pixels. This image can also be 1600x900 or 1200x675 pixels as long as the aspect ratio is maintained. The site's platform manages the cropping depending on where the image appears. Banners on an article do not need to be cropped to 1920x530px as they will automatically be cropped by Drupal.
Use of Typography on Banners
Banners are an ornamental element of our web content, use of typography in the graphic should be limited and used only as a graphical element aiding the design and composition of the art. Saving text as an image or "flattening text in Photoshop" should be avoided as much as possible, as it removes the ability for a screen reader to capture that information.
Typography should be limited and not be used to convey content.
Focal Point
Focal Point (+) allows you to specify the portion of an image that is most important. This information can be used when the image is cropped or cropped and scaled by the Drupal platform to layout your pages.
JPG, GIF, PNG File formats
When deciding between JPG and GIF formats for web images, consider the following: Use JPG for photographs and photo-like images, GIF for images that contain line art, typography, or simple animations. JPG works best for photographs due to its lossy compression, while GIF is ideal for line art and animations. More details on the difference of these formats here.
Only on Landing Pages
Carousels only appear on landing pages as a way to "feature" articles that belong to that group.
The Carrousel module also is known as the "featured news carousel." This page component pulls the banners used in the articles. The carousel aspect ratio is 16:9 which is equivalent to 1920x1080, 1600x900 or 1200x675. If your banner graphic is of a different aspect ratio, the image shown in the carousel will be distorted and cropped incorrectly.
Typography on Graphics
If possible, do not use typography on the banner graphic. If typography is placed in the lower third of the banner graphic, the overlay text would overlap the text within the image affecting legibility, thereby creating an accessibility barrier.
Images in the Content
16:9 & 4:3 Standards
When in doubt, use the two most common aspect ratios. 16:9 and 4:3. Most cameras can capture images in those dimensions. Images in the body should not be larger than the maximum width of 1920px. Other sizes that will display properly with minimal loss of quality are: 1200px, 850px. wide.
Video Thumbnails
Video typically uses the standard 16:9 ratio which translates into any of these dimensions. Safe dimensions to be used as a "screen grab" or video thumbnail can be: 1920x1080, 1600x900 or 1200x675.
Article Thumbnails
Stories are also known as the "Article" Drupal content type. They are featured on the landing page's "featured news carousel" as well as in a view on the group's news page or archive. The article thumbnail uses 440x520 or 880x1040 pixel dimensions, it can also use the standard aspect ratio (16:9) as Drupal can crop the image with the assistance of the focal point tool.
Photo Galleries
Photo galleries display a uniform grid of thumbnails automatically created by cropping their images in an aspect ratio near 16:9. The shape and aspect ratio of the images in a gallery can vary. For best results, images should not exceed the width of 1200px when shown in larger format.
Sidebar Images
Images added inside the left and right sidebars will automatically fill the width of those areas. The pixel size of the image affects the quality displayed, anything smaller than 600px wide might suffer quality loss, pixelation and/or blurring. 800px wide images display well on sidebars.
Images in the Body Area
When uploading images they should not exceed the width of 1920px. Images can be aligned left, center, right or they can also be without alignment. There are 7 default dimensions available. Drupal will resize your images to the following dimensions: (listed by their width): 115px, 200px, 300px, 450px, 600px, 900px and Max Width.
Largest Image Sizes
Please do not upload images that exceed the width of 1920px or file sizes larger than 2.5MB. Please avoid uploading duplicates when possible.
