MyOCF

Images Information

General Notes on Images

  • File sizes: Try to keep images smaller than 500KB-600KB in size. In some cases, you may go over that size. Consider that users on slower bandwidths and cellular data plans may experience pages loading more slowly.
  • Centered and Wrapped/Floated images: In WYSIWYG or rich text editors, you have the option to embed images and then center them or have text wrap to the left or right of the image (also known as floating). Be sure images in these spaces do not exceed 682px in width. 
    • Click the Insert from files button in the editor.
    • Select the image, and before closing the image pop-up, scroll down the right size of the pop-up to the Caption and Alignment sections. (You can always add Captions and Alignment by clicking on the image in the WYSIWYG editor, and then selecting the Edit Image link that renders below the image.)
      • Set the Caption field only if you need it. In this case, do not select Center, Right, Left Wrap, or Right Wrap alignment.
      • Left alignment will be selected by default.
      • Do not select Right alignment, as it simply doesn't make sense in this setting.
      • Select Center if the image doesn't have a caption.
      • Select Left Wrap if the text should wrap to the right of the image and flow beneath it.
      • Select Right Wrap if the text should wrap to the left of the image and flow beneath it. Note: it may seem counter-intuitive, but when right-aligning images with text, the image still gets inserted before the text it should appear to the right of...)
      • Be sure to save changes.

 

Block Images

Featured Story Block:

  • Image Dimensions: 768px wide by 1024px tall
  • Note: Focal point recommended

Image Block:

  • Image Dimensions: 1024px wide by any height

News Story Block Images (3):

  • Image Dimensions: 1024px wide by 768px tall
  • Notes: Focal point recommended; 3 news items, such as on the Home page

PDF Download Block Image:

  • Image Dimensions: 140px wide by 180px tall

Regional Stories Block Images (3):

  • Image Dimensions: 768px wide by 1024px tall
  • Note: Focal point recommended

Statement Image Two Column Block:

  • Image Dimensions: 768px wide by 1024px tall
  • Note: Focal point recommended

Statistics Block Image:

  • Image Dimensions: 768px wide by 1024px tall
  • Note: This image is only visible on devices 1200px wide and up

Text Image Block:

  • Image Dimensions: 768px wide by 1024px tall
  • Note: Focal point recommended

Pages Hero Images:

Basic Page Hero Image

  • Image Dimensions: 1024px wide by 576px tall
  • Note: Focal point recommended

Home Page Hero:

  • Image Dimensions: 1920px wide by 1440px tall.
  • Note: Focal point recommended. Be sure to leave enough clear, light-colored space at the top of the image for the topmost navigation menu to render. This image is only visible on devices 1025px wide and up.

Landing Page Hero:

  • Image Dimensions: 1920px wide by 1080px tall.
  • Note: Focal point recommended

Newsroom Landing Page Hero:

  • Image Dimensions: 1024px wide by 576px tall
  • Note: Focal point recommended

News Item Page Hero:

  • Image Dimensions: 1024px wide by 576px tall
  • Note: Focal point recommended

Staff Member Landing Page Hero:

  • Image Dimensions: 1024px wide by 576px tall
  • Note: Focal point recommended

Staff Member Page Hero:

  • Image Dimensions: 1024px wide by 576px tall
  • Note: Focal point recommended

Story Page Hero:

  • Image Dimensions: 1024px wide by 576px tall
  • Note: Focal point recommended

Other Images:

Impact Area Featured Image:

  • Image Dimensions: 1024px wide by 576px tall
  • Note: Focal point recommended

Story Page Mobile Hero:

  • Image Dimensions: 1024px wide by 768px tall.
  • Notes: Optional. If omitted, the Desktop Hero Image above will be used. This image is only visible on devices under 768px wide. It has slightly different dimensions than the Desktop Hero Image above, and if included, will be used on landing page listings and Related Stories blocks.