Recommended Pixel and Resolution Sizes

 

Image Slider

Homepage Image Slider

  • Description: Custom rotating image slider on LCC Website Homepage. Features image, text box and click function.
  • Use: LCC Website homepage only. Available to Level 10 Administrators only.
  • Size: 2300 px wide x 1200 px tall, not to exceed 500 KB

Interior Page Image Slider

*Page display (no sidenav). No part of the image is cropped.
**Page display (with sidenav). Image cropped slightly on left and right to accommodate content area.

 

Content Slider

  • Description: Pre-styled slider that rotates on click. The layout of images, text, icons and buttons can be customized inside the slider using snippets. Typical layout features two-columns, with image on left, and text, links, icons or buttons on right. See Sliders for complete description.
  • Use: Any interior web page. Available to all web editors.
  • Size: 900 px wide by 600 px tall (when used in two-column layout).
  • Examples
 

Breadcrumb Image

  • Description: Image that appears in breadcrumb (title) area at top of page. Image is overlaid with a blue filter. Default HSB image applies unless changed. Visibility is dependent upon title text, screen display size, and custom breadcrumb settings.
  • Use: Any interior web page. Available to all web editors.
  • Size: 2300 px wide x 1080 px tall, not to exceed 500 KB.
  • Examples

Note: Breadcrumb images are much larger than the actual title area because the image also floats behind the blue title bar at the top of the page as well as expands depending on custom breadcrumb options. Expect all around cropping. Images with faces tend to cause issues with head placement within viewable areas as well as appearing behind the title text.

 

Hero Unit

 

Image Block

*Placeholder image available in the case where a head shot is not available.

 

News Feed

  • Description: image that accompanies any News & Noteworthy items that appear on LCC Website homepage.
  • Use: LCC Website homepage only. Available to Level 10 Administrators only.
  • Size: 400 px wide by 220 px tall

Page Banner

 

Additional Image Sizes:

In page images should be sized according to the column they display in. A full page (with sidenav turned off) is 1200 pixels wide. A full page (with sidenav turned on) is 900 pixels wide. Other typical column layouts are 9 and 3.

  • col-md-12: 1200 px wide
  • col-md-11: 1100 px wide
  • col-md-10: 1000 px wide
  • col-md-9: 900 px wide
  • col-md-8: 800 px wide
  • col-md-7: 700 px wide
  • col-md-6: 600 px wide
  • col-md-5: 500 px wide
  • col-md-4: 400 px wide
  • col-md-3: 300 px wide
  • col-md-2: 200 px wide
  • col-md-1: 100 px wide