Websites

Resource Guide

Image Styles

What are Image Styles?

Image Styles are used to set presets for image processing. These image styles typically scale and/or crop an image to a particular size. Drupal has its own collection of image styles and ITS has created many image styles based on use cases. When an image is displayed with a style, a new image file is created on the node (page) or custom block (component) and the original image is left unchanged. 

Our Image Styles

Have you noticed that an article header image displays a certain way or have you viewed the various hero slider options? These behave a certain way because of their defined image style. Depending on how you want to use a particular image, it may matter what initial size, or ratio, your image is that you upload. Here is a list of all image styles and their optimal dimensions. Of course, it doesn't mean that your original image has to be these exact sizes, however, do note that your image will scale and crop appropriately depending on how you will use that image throughout your site. 

There are predefined image styles for structured content on the site. This includes content types that have header images or profile images and every custom block component that allows for an image or background image. These image styles typically scale and crop. When using the WYSIWYG editor, there are a selection of special WYSIWYG image styles that will scale images accordingly. 

Image Styles for Content Types

  • Article Image - 1170 x 658 (*note, this is also used for event image)
  • Article Image - 600 x 338 (block view)
  • Article Image Listing - 266 x 266 (listing view)
  • Article Thumbnail - 83 x 83
  • Event Listing Image - 190 x 190 (listing view)
  • Event Listing Image Alternate - 370 x 206 (block view)
  • Galleria Thumbnail - 100 x 100
  • Profile Card - 118 x 118 
  • Profile Page - 268 x 268

Image Styles for Custom Blocks

  • Bubble - 250 x 250
  • Hero Slider Default (Mobile) - 768 x 250
  • Hero Slider Default (Tablet) - 1024 x 250
  • Hero Slider Default (Narrow Screen) - 1400 x 250
  • Hero Slider Default (Wide Screen) - 1920 x 250
  • Hero Slider Medium (Mobile) - 768 x 450
  • Hero Slider Medium (Tablet) - 1024 x 450
  • Hero Slider Medium (Narrow Screen) - 1400 x 450
  • Hero Slider Medium (Wide Screen) - 1920 x 450
  • Hero Slider Large (Mobile) - 768 x 730
  • Hero Slider Large (Tablet) - 1024 x 730
  • Hero Slider Large (Narrow Screen) - 1400 x 730
  • Hero Slider Large (Wide Screen) - 1920 x 730

Video Styles for Video Headers

  • Header with Video - Xlarge: Focal Point Scale and Crop 2440×700
  • Header with Video - Large: Focal Point Scale and Crop 1920×555 
  • Header with Video - Medium: Focal Point Scale and Crop 1024×300
  • Header with video - Small: Focal Point Scale and Crop 768×450

Image Styles for WYSIWYG 

  • WYSIWYG Scale - 225px (xs)
  • WYSIWYG Scale - 367px (s)
  • WYSIWYG Scale - 550px (m)
  • WYSIWYG Scale - 733px (l)
  • WYSIWYG Scale - 825px (xl)
  • WYSiWYG Scale - 1170 (grid size)

Drupal Image Styles

  • Thumbnail - 100 x 100
  • Medium - 220 x 220
  • Large - 480 x 480