Photography

Photos liven up your page and are a great way to show off your students, staff, or facility. We encourage you to use them. You can include photos individually on the page, or as part of a slideshow.

Need help finding a photo to use?

Jump to a component:

Photo guidelines

Image with text saying 'I'm not accessible'

Images with text

Images that include text, such as event posters, aren’t accessible for people with disabilities. Plus, the text often becomes too small to read on smaller screens. For these reasons, we won’t include images with text on the website except in special cases.

If you want to include an event poster, we’ll create a web page with the relevant information and include any artistic elements from the poster as images on the page. If you want text over the top of an image, a slideshow with a caption is a good alternative.

Copyright symbol

Attribution and copyright

Don’t use Google Images for finding photos or clipart – almost everything is someone else’s property. Stock photography also looks less authentic and realistic – people want to see PCC!

Very pixelated image of a man

Image quality

Try to choose photos that are in focus, evenly lit, not pixelated or grainy, and have a good composition.

How to use for Photo guidelines

Learn how to add photos in WordPress. More information is available in our style guide on the photography pages.

Photo sizing

We can include images on a page at three different sizes – 25%, 50%, and 100% of the width of the page. On most pages, images will be either 25% or 50%. 100% width is reserved for event and campaign banner images, which usually come from Marketing and Communications.

How to use for Photo sizing

When sending us photos, it’s best to send the highest-quality version you have. At least 1000px wide is best. We handle the cropping and resizing on our end.

Learn how to add photos in WordPress. More information is available in our style guide on the sizing and alignment page.

Example of Photo sizing
Cat

100% width image

Cat

50% width image

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vel justo cursus, ultricies nulla id, vehicula lacus. Pellentesque fermentum sapien sed orci fringilla, vitae vehicula odio auctor. Morbi non lacus auctor, cursus arcu ut, scelerisque purus. Etiam in lorem non erat maximus laoreet sed vitae urna. Pellentesque condimentum tortor nisi, id rutrum turpis porttitor a. Nam bibendum luctus arcu.

Cat

25% width image

Mauris gravida neque quis dolor semper pharetra. Suspendisse ullamcorper id mi id faucibus. Nunc rutrum pharetra sapien. Ut consectetur vehicula ex eu accumsan. Ut ultrices justo eu lectus dignissim laoreet sit amet pharetra ex. Pellentesque non tortor vel tortor tincidunt lacinia. Maecenas sed condimentum felis. Praesent ut volutpat turpis, et hendrerit quam. Proin non suscipit erat. Mauris libero elit, ultricies eget tristique iaculis, congue ac felis.

Slideshows

If you have more than one related photo to include on a page, you have the option to put the images in a slideshow. The images must be:

  • Ideally landscape (horizontal) orientation. Vertical images will have the top and bottom cropped off.
  • Limited to no more than 6 images.

Slideshows can have optional captions on some or all of the slides, and the captions can include links.

Styling

Slideshows let users scroll through a series of images. The slideshow will cycle through automatically, or users can use the arrow icons on either side of the images or the navigation circles below the images.

Slideshows can either be full-width or 50% width and aligned to the right (text will wrap around them).

How to use for Slideshows

Learn how to add photos in WordPress. More information is available in our style guide on the slideshows page.

Example of Slideshows
Cat bathing pawCat sitting outsideCat wearing glasses

Cascade Campus

Cascade campus

Rock Creek Campus

Rock Creek Campus

Southeast Campus

Southeast campus

Sylvania Campus

Sylvania Campus

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vel justo cursus, ultricies nulla id, vehicula lacus. Pellentesque fermentum sapien sed orci fringilla, vitae vehicula odio auctor. Morbi non lacus auctor, cursus arcu ut, scelerisque purus. Etiam in lorem non erat maximus laoreet sed vitae urna. Pellentesque condimentum tortor nisi, id rutrum turpis porttitor a. Nam bibendum luctus arcu.