There are many good options for publishing photos to the website. Read how photos can help your page, harm your page, and your many options for publishing them.

Top Mistakes

Before we go into adding photos, here are the top mistakes to avoid.

Information first

Users are task-oriented and impatiently seeking information. They did not come to your page to be awed by a photo. Connect them with their information, written in the best possible way, first. And then refine this writing. Far down the line comes anything else like images. Bad web developers ignore refining information presentation and attempt to cheaply spruce up a web page with an image. This image, while pretty to a developer, may only contribute visual bloat and cause a worse user experience.

Don't expect header images to tell your whole story

Photos supplement the writing on your page. Don't think you must fully represent your program and its aspects in your header photo(s), or you'll find yourself adding complex collages and/or too many photos in the rotational header. Keep it simple. Ideally you'll just want just one good header image of one aspect of your page. 

Don't use stock photos

There's a useful quote, "If you value your readership, don't use stock photos." Readers know when you're using a generic photo, and it does nothing but present your page as bland and generic. Instead, use photos of our people. Many are available in our Flickr page. If you don't have a photo and need one, contact Cal Powell to take one before considering stock photos.

Ways to Include Images

Header Image

Placing an image into the Header Images field puts it at the top of your page. Before or after submitting it they must be cropped to 2800x958. To do this using Expression Engine's image editor, after submitting your header image, go to File > Content > File Manager, click the "Edit Image" icon to the right of your image (it will be at the top), then click "Crop Mode" to crop it to 2800x958.

Best for a high-quality, landscape photo prominently placed in your page.

Example 1 (multiple images), Example 2 (single image)

Thumbnail

Placing image(s) into the Images field will generate thumbnails of them that link to the full-size version at the bottom of your web page.

Best for any photo that doesn't fit well into another category.

Example

Photo Gallery

By going to Content > Publish > Galleries, you can easily make a photo gallery. This gallery will be in the gallery index, its first photos will visit the bottom right of every page until a newer gallery is added, and by using Categories, the gallery can automatically link from related pages.

Best for collections of photos.

Example

Slideshow

Placing images into the Slideshow field generates a slideshow inside your web page. This is like a photo gallery, except while a photo gallery stands on its own, a slideshow can include any other content in the rest of the page. 

Best for between 2 and 15 photos, or if you want to customize what surrounds your photo gallery.

Example

Inside Open Text

Inside any open text field, you can click the Image icon to insert an image into the page. After selecting the image, remove the height and width definitions to allow the image to scale to different screen sizes. If an image is added into one of the side boxes, it will be constrained to the size of the box.

Best for Giving a preview of something that's linked under it (Highlight Box or Side Item field) or showing a small label/brand (Body field).

Example 1 (Body field), Example 2 (Side Item and Highlight Box fields)

Additional Reading