Skip to Main Content
Skidmore College
Help for Web Editors

Image Help and Resources

Approved images

It is recommended to use Skidmore approved images from our online photo gallery. Contact our staff photographer with any specific photo needs or requests. If you choose to go with your own images, be sure that the images are high-resolution quality. See the offical photo policy

Photo Sizing

OU does not limit the size of files to be uploaded, but it is still best practice to edit your images to the desired size before uploading.  This is to make the loading of images much faster and easier for our webpage users, and also to conserve space on our server.  You should always edit the full-sized image using your choice of image editing software, PRIOR to attempting to upload it to the web.

Sizes Images on a standard page

Header Background Image

The default header has a dark green background with the name of your site in white. You can replace that color with a photo background in a snippet.

Ideal dimensions
1920px wide
~240-360px tall

 

Standard Page - full-width

A full-width photo on the main content area of a standard page

Ideal dimensions
1070px wide
~350-600px tall

Standard Page - 1/2 width

A half-width photo on the main content area of a standard page

Ideal dimensions
535px wide
~200-600px tall

Standard Page - 1/3 width

A 1/3 width photo on the main content area of a standard page

Ideal dimensions
355px wide
~250-450px tall

Standard Page - 1/4 width

A quarter-width photo on the main content area of a standard page

Ideal dimensions
265px wide
~150-400px tall


 

IMAGES iN A photo Gallery

Default Photo Gallery

The basic photo gallery is a slider with hollow dots on the bottom-left. The most important thing to remember for this gallery is that every photo should have the EXACT same dimensions. If the photos do not have matching dimensions, you will most-likely see a grey bar appear that the bottom of the photos with a lesser height. 

Suggest number of photos: 5-8

 

Filmstrip Photo Gallery

The gallery has a left and right arrow for the user to navigate around. It also includes a lightbox when the user click on a photo.

If you are working with photos with multiple dimensions, this gallery can adapt. The width can be whatever you'd like but the maximun height is 700px.

Suggest number of photos: 8-15

 

Column Gallery

This shows all your photos at once in either 3, 4, 5 or 6 columns. If you are working with photos with multiple dimensions, this gallery can adapt. The photos restructure themselves around automatically in order to create the most even columns possible. If the photos are all the same dimensions, it'll look clean and even. If the photos are not the same dimensions, the layout might remind you of a pinterest layout. The width of the photo can be whatever you'd like but the maximun height is 700px.

Suggest number of photos: 10-30

 

See examples of photo galleries and how to customize them


 

IMAGES oN A News Article

News Featured Image

This is the top photo at the beginning of the news article template. 

Ideal dimensions
935px wide
~400-600px tall

News Article Image

This photo is full-width and sits on a line of it's own on the narrow news article content area.

Ideal dimensions
645px wide
~300-500px tall

News Thumbnail Image

This is the circle photo seen on the news index page.

Set dimensions
550px wide
550px tall

 


Things to consider

It's important to note that an image that is too tall will push your content down the page, particularly if you have an overlarge banner.  Some widescreen monitors have a very narrow vertical viewing space, so it's a good rule of thumb to keep your images as small as possible. 

In addition, some browsers will render overly large images poorly, so while a larger image may technically fit, you may find a better presentation with a smaller image. Also keep in mind that many users are visiting your web site on their smartphones, iPads and netbooks, which have very small screens, and load large images very slowly.  Smaller is sometimes much better!

 

Updated on April 2019