Images

This page contains:

  • guidance for all writers/editors/content specialists at schools and centers across USC, followed by
  • guidance only for editorial staff who upload content to USC News

1. Picking effective images

This guidance is for writers/editors/communications staff in schools and centers.

Imagery should tell a story. Here are characteristics we look for in an image, whether it is for USC News or USC Trojan Family Magazine.

  • Conveys emotion or mood
  • Takes viewer into a special moment
  • Illuminates a character or personality
  • High enough resolution that we can run them large across a large column on a website – preferably at least 1800 pixels wide, but 1200 pixels wide at a minimum. If it’s for print, images should be supplied at as high a resolution as possible.
  • Landscape images are highly preferred for USC News.

Here’s what we like to avoid, when at all possible:

  • Staged grip-and-grin photos
  • Someone holding a certificate
  • People lined up in a row
  • People drinking
  • People in the middle of saying something (open mouth)
  • Headshots
  • Suggestive imagery

2. How images are used on USC News

This guidance is only for editorial staff who upload stories into USC News.

Images can be used in these ways:

  • A featured image that runs with a story. These are strong images that appear on an article page. If you upload a photo as a featured image for a story, a smaller version of that photo will appear as a thumbnail along with a story excerpt (teaser) on news.usc.edu.
Featured image, aligned full column width, on an article page.

Featured image, aligned full column width, on an article page.

Featured image used as the lead image for a top story on the USC News main news page (news.usc.edu).

Featured image used as the lead image for a top story on the USC News main news page (news.usc.edu).

  • A secondary image. These images are supporting images that are used in the body of a story. Images may be used this way if they aren’t strong enough to be used as featured images or if they are vertically oriented pictures.
A secondary photo appears in the body of a story and is usually only a supporting shot.

A secondary photo appears in the body of a story and is usually only a supporting shot.

Image requirements

All images must be uploaded at as high a resolution as we have available. WordPress will downsize the images for us.

Make sure to crop all horizontal images to a proportion of 3 to 2. In other words, if your image is 1800 pixels across, it should be 1200 pixels tall. You can determine an image’s size in Photoshop by going to the Image pull-down menu and selecting Image size.

USC must have the right to use the image you are uploading. If you don’t know if we have usage rights, don’t upload the photo.

How to upload images

Before you upload an image, check to see whether it’s already in our WordPress library. On the lefthand side of the page, click Media, then Library. Type your search terms in the search box to see if your photo appears in the library. If it’s already there, don’t upload a new one. Just select the existing image.

There are two ways to upload a new photo: Directly from a post, or within the Media Library.

Directly from a post:

  1. Create a post by going to Posts on the lefthand menu and selecting Add new.
  2. On your new Post page, scroll down the righthand column and select Set featured image if you would like to upload your photo as a featured image. If you want to place a secondary image directly within the text, place your cursor where you want to place the image, then click the Add Media button.
  3. You will then be taken to the Media Library’s “Upload New Media” page. Drag your image onto that screen. Then type in a title (for example, Pete Carroll); a caption (for example, The Trojans were led by Coach Pete Carroll from 2001 to 2009. Carroll was selected for USC’s Athletic Hall of Fame in 2014. (Photo/Philip Channing)); and alt text (for example, Pete Carroll May 2006 press conference).

Within the Media Library:

  1. Select Media from the lefthand menu, then Add New.
  2. Follow the directions in No.3 in “Directly from a post” above.

How featured images are displayed

A featured image can either …

  • Run at the very top of a story on an article page, across the full column width. This is best for strong, beautiful photos.
  • Appear near the top of the story on the article page, at a small size, on the righthand side of the middle column of text. Best for “meh” photos.
  • Not appear on the article page at all and ONLY appear as a thumbnail image on news.usc.edu. Use this when you are running a slideshow.

You can control how your featured image appears by using the Featured image layout pull-down menu under Story Settings. It looks like this:

This pull-down menu lets you control how your featured image appears on the page.

This pull-down menu lets you control how your featured image appears on the page.

Slideshows

Please don’t upload slideshows using embed codes. Here’s how you upload a slideshow from Flickr: First you create a set (album) of photos on the uscnewsphoto Flickr page, complete with captions and photo credits. Then you use a tool on our WordPress dashboard called Royal Slider.

  1. From the WordPress dashboard, click the RoyalSlider link at the bottom of the lefthand menu. Using RoyalSlider
  2. Use the “Add New” or “Create New Slider” link to add a slideshow
  3. Choose “Flickr Gallery” from the set of options.
  4. Name your new slideshow and enter its information.
  5. For Flickr API key, enter 51235c1319b402de9293dc95f6b4929f
  6. You’ll find the Flickr photoset (album) ID in the URL for the Flickr set. Or if you only have the embed code, you’d find it within that chunk of code as a string of numbers after “set_id=”  It will look like the bolded numbers here: https://www.flickr.com/photos/universityofsoutherncalifornia/sets/72157645117577865/
  7. There are several display options for the photos on the right, which you can customize as you like. Be careful that the option you choose doesn’t distort the photos.
  8. At the top of the slideshow editing screen, there’s a link “Embed this slider to site.” It will pull up a dialog box showing the shortcode to embed this slideshow. It looks like [new_royalslider id=”1″]. Just add that shortcode to any article page where you want the slideshow to appear. When in doubt, look at how it was done in a previous slideshow.

Customize how thumbnails are cropped

Our thumbnail images on the news.usc.edu page have little, colorful category boxes or tabs that are superimposed on the top lefthand corner of each image. Unfortunately, sometimes that means that these tabs cover up important parts of the thumbnails, like someone’s head. You can change that by customizing the cropping on a thumbnail. Here’s how:

  1. Go to the Media Library and make sure the photo you’re interested in is selected.
  2. Click on Edit image. You’ll see the image in front of you.
  3. Use your mouse to click and drag a rectangle directly on the photo that simulates how you want the photo to be recropped (seeking to minimize important parts of the photo being in the upper lefthand corner of the image).
  4.  In the Aspect Ratio boxes on the righthand side of the screen, type the number 3 into the left box and 2 into the right box, and hit return on your keyboard.
  5. On the radio buttons below that, click Apply changes to: Thumbnail.
  6. Click the crop button, then click the Save button.
    Crop button

    Crop button

     

Photo information

When you upload a photo, you will see blanks where you can type in this information:

  • A descriptive title
  • A caption. Make sure to include the photo credit following the caption in this format: (Photo/Photographer Name). If it was shot by a USC photographer, use this format: (USC Photo/Photographer Name).
  • Alt text. This should be a short string of words such as Students study beached whale
  • Description. If you have the date the photo was shot, or at least the year, this is a good place to put it.

 Infographics

Create your .jpg infographic at least 1,200 pixels across. It can be any height.

The infographic is loaded into WordPress via the Image Library. Here’s how you load it:

  • Create a post just like you do for any other story
  • Write a one- or two-sentence introduction for the graphic
  • Underneath the text, place your cursor and click “Add Media”
  • Upload the image at full size and select “Align none”
  • Go to the top right and click the “Text” tab
  • Go to the code for the image you just placed
  • Where it currently has width specified in pixels, change the width to 100% and remove the height.

Example:

This is the original code

<a href=”https://news.usc.edu/files/2014/08/IMG_6075.jpg”><img class=”size-large wp-image-67821″ src=”https://news.usc.edu/files/2014/08/IMG_6075-900×600.jpg” alt=”pep rally crowd at Galen Center” width=”600″ height=”400″ /></a> The crowd responds to performances by the Song Girls and Trojan Dance Force.

And this is the changed code

<a href=”https://news.usc.edu/files/2014/08/IMG_6075.jpg”><img class=”size-large wp-image-67821″ src=”https://news.usc.edu/files/2014/08/IMG_6075-900×600.jpg” alt=”pep rally crowd at Galen Center” width=”100%” /></a> The crowd responds to performances by the Song Girls and Trojan Dance Force.