Images

In both themes of GW Drupal, images can be used across almost every single content type, from pages to Promotions to Content Sets, to provide visual interest or more information.

It's important to note that:

  • All images should have descriptive alternate text provided to ensure that they are accessible for the web
  • Images are accessible via the File Browser interface which offers a basic folder structure, and the ability to rename, resize and crop images
  • Once an image is uploaded, it can be reused across the website without reuploading a new instance
  • Just like on your computer, two images cannot have the same filename; the name(s) must be unique

Uploading an Image

The process to upload an image to a GW Drupal website is the same in both the Classic theme and the Editorial theme. Most content types have a designated Main Image field to provided a featured image for the page or Promotion. However, it is also possible to upload an image directly into the Body text field, which we will go over here.

Within the WYSIWYG Body text editor of the desired content:

  1. Click on the Image icon
    • The Image Properties window will open
  2. Click on the Browse Server button
    • File Browser will open
  3. Be sure that you're in the "Images" directory folder
  4. If your image has never been uploaded to your website, click on the Upload button
  5. Click Choose File to locate the desired image on your computer
  6. Once found, double-click on the image file or click the Open button
    • The file name will be populated in File Browser's upload field
  7. Click the Upload button to upload the image to your GW Drupal website
  8. Highlight your image from the list and double-click on it or click the Insert button
    • You'll be taken back to the Image Properties window
  9. Describe what's in the image in the Alternate Text field
    • Be descriptive, do not use file names, event names, program names, etc...
    • Describe the activity in the image and include all text in the image.
  10. If you would like the image to link to something, click on the Link tab
    • Type or paste in the Link URL as necessary
    • Set the target to "New Window" for documents and any external website, including other GW websites
  11. Click on the OK button

You should now see your image in the Body editor.

Image Specs and Resolutions

Depending on whether your website uses the Classic theme or the Editorial theme, you will need to upload your images at certain specifications.

 

Inline with the Body Text

Recommend uploading your image at 1080 x 720 minimum.

In the Image Properties window, set the width to 100% and delete the height value

  • this will add the image at the full width of the content area
  • at 100% width, the image will also be responsive for screen sizes
  • you can use smaller percentage values on the width if you would like a smaller, but still responsive, image
    • be sure to delete the height value in these cases as well

Main Image on a Page

  • 1080 x 720 pixels
  • Person page headshot:
    • 720 x 1080 pixels

Hero banners:

  • Large full-bleed: 1152 x 768 pixels
    • there is a 17% "dead zone" at the top and bottom of the image that should not include critical information
    • display area equals 1152 x 512 pixels
  • Large fixed-width: 1080 x 480 pixels
  • Small: 1080 x 270 pixels

Sliders

  • 1080 x 480 pixels
  • Account for overlay with text at bottom of images or graphics.

Promotions:

  • 1080 x 720 pixels

Main Image on a Page

  • Page with one sidebar: 700px wide; the height will vary based on your image
  • Page with two sidebars: 460px wide; the height will vary based on your image
  • Person page headshot: 220 x 220 pixels

Sidebar Promotion Images

  • Large Promotion: 220 x 220 pixels
  • Medium Promotion: 220 x 140 pixels
  • Small Promotion: 220 x 80 pixels

Brand & Heroes

Large rotating & static:

  • Brand: 318 x 260 pixels
  • Hero: 620 x 260 pixels
  • Large full-width: 940 x 260 pixels

Medium rotating & static:

  • Brand: 318 x 190 pixels
  • Hero: 620 x 190 pixels
  • Medium full-width: 940 x 190 pixels

Small static:

  • Brand: 318 x 120 pixels
  • Hero: 620 x 120 pixels

Photo Gallery

  • 1280 x 853 pixels at minimum
  • Photos should be at a 3:2 ratio