Day 3 – Pictures, audio and video


Preparing pictures for posting

Preparing pictures properly for use on your website is the mark of skill and professionalism. It is also doing your readers a great favor. Remember a couple of things going in:

Readers like photos and will look at them.

You CAN use lots of pictures on your site, but you should still be judicious in selecting them.

Pictures on a website are necessarily smaller than those in print, so take that in consideration.

To prepare photos for a website takes a three-step process: selection, cropping and sizing.

Selection. Your photographers should be told again and again that the first rule of photojournalism is take lots of pictures. Now that we are in the digital age and don’t have to worry about the costs of film and developing, there is no excuse for not having lots of pictures to choose from. So, take lots of pictures, and make sure you have plenty of all three kinds: long shots, medium shots and close-ups. Photojournalists should shoot from different angles, from high and low, from left and right.

In selecting pictures, you should look for the photos that tell a story — where something is really happening. Look for action — people moving — and drama — expressions. Look for relationships — people to people, people to objects. Look for things that other people are not likely to see.

Remember, too, that all photos should be in the JPG format. That is, they should have a .jpg suffix. TIFF works for print but does not work for the web.

Cropping. Almost all pictures need to be cropped. There is unnecessary stuff that should be deleted. There are things that should be emphasized. The viewers will appreciate this more than you realize. A mediocre photograph can sometimes be made compelling with good cropping. Spend the time, and have your students spend the time doing this.

Sizing. Getting your photos correctly sized is vitally important for your website. If you don’t size correctly, a photograph will take up too much space on the server and will be slow to load on the live site.

Generally, photos on the web should not be more than 600 pixels wide. More importantly, they should be set at a resolution of 72. Check this and make sure it happens. Some cameras are set to take pictures at a resolution of 300, and this is way too bug for the web. A higher resolution than 72 does not give you more quality on your website. It simply takes up storage space and increase load time — to no benefit to anyone.

Finally, a valuable tip: Get a picture storage account somewhere — Flickr and Picasaweb are two of the most popular storage sites, but there are plenty of others. Those sites will give your pictures their own URL, and that’s important if you don’t want to upload pictures to your own site; if they have a URL, you can call them in from your storage site. Having a good storage site — one that you students have access to — allows your site to re-use pictures and lets your students find pictures that others have taken but that may be useful to their stories.


Posting pictures

Most content management systems have an easy way of posting pictures to a server and getting them onto the live site. With WordPress, the image function begins with the icon at the upper left over the posting window, the first one to the right of Upload/Insert.

When you click on that, you will get a dialogue box that asks you to find the picture and upload it. See below:

When the picture is uploaded, you will get a window that allows you to adjust the size and position of the picture. It also gives you some other valuable options and information, such as the picture’s URL.

You insert the picture into the post by clicking on the Insert into Post button at the bottom of the box.

You should become familiar with all of the information and functions contained in this box. The more you know about them, the better that you and your students will be able to handle the pictures.

An alternative to all this is to have your pictures on some kind of photo storage site that gives them a URL and call them onto the call with an HTML tag that you would place in the HTML window of your posting page. For example:

<img src=”–3VUaTjY/TkXwFV5oLbI/AAAAAAAALJM/khdH4IGPNaE/s144/IMG_2804.JPG”>

The <img src=”URL”> is HTML’s image tag. Placed in the HTML window, the link above would result in the following:


Featured Image. Some themes in WordPress allow you to place pictures in special places on the page. In some cases, this is down through the Featured Image on the posting page. In others, it is a custom settings window. In either case, the basic operation of uploading and inserting an image into the post is the same as the one described above.

NexGen gallery. The NexGen gallery plug-in is a nifty tool that comes with most ISONN WordPress-based sites. You should get thoroughly familiar with what it does and how to use it. The only way to really do this, of course, is to upload some pictures to the gallery and experiment with its several functions. Here’s a link to a video that will introduce you to the NexGen gallery function.

Once you have loaded your pictures into a gallery, you can create some interesting transitions and you can place that gallery on an article page by using the NexGen button on the top of the posting window. (In this screenshot, it’s the second button from the left on the top row. Once it goes onto your page, it can look like this:

Now look on the Widgets page. You will see a NexGen slideshow widget, which you can use to get your galleries on your home page.

There could be many uses for this gallery function on your article pages and on your home page. The key is for you to experiment with all of the functions and get familiar with what they will do.


Getting audio onto your site

For some instruction in producing and editing audio files, check on the Going Online summer workshop page on using audio as a reporting tool.

Editing audio files can most easily be done with a free, downloadable program called Audacity. You’re probably already familiar with it, and you should have it on your computer.

When you insert audio, you can simply create a link to your audio file, and when the reader clicks on it, the file will play in a separate window.

Or you should use the player demonstrated below.

First, upload your audio clip using the Add Audio button on the top of your form for the story. The clip should be no longer than two minutes; otherwise, the file will be too large for our system to store it. Make a note of the URL of the file.

Second, the player can be accessed by using the following code, which you should insert in the proper place in the HTML after the logo:

<script language=”JavaScript” src=””></script>

<object type=”application/x-shockwave-flash” data=”” id=”audioplayer1″ height=”24″ width=”290″>

<param name=”movie” value=””>

<param name=”FlashVars” value=”playerID=1&amp;soundFile=“>

<param name=”quality” value=”high”>

<param name=”menu” value=”false”>

<param name=”wmode” value=”transparent”>


The part of the code that is bolded and underlined is where you should put the URL of the audio file.

Audio set up in this way should have a short introduction that tells something about the audio and how long it is. If there is a significant part of the audio the readers may want to hear (At :36, the victim screams.), tell where it is in the clip.

Here’s what it all should look like:

Writing guru Roy Peter Clark discusses the value of writing with verbs (1:43).


Video on your site

For some instruction in producing and editing audio files, check on the Going Online summer workshop page on teaching your students to use video in their reporting.

Getting video onto your site is a simple matter.

Once the video is produced, put it on a third party host such as YouTube or Vimeo. (Tip: We prefer Vimeo because of its better quality.) You can use the embed code from these hosts to embed your video on a posting page or into a widget that you can use on the home page. On a posting page, it can be even simpler: If you are using YouTube, Vimeo, Veoh, or BlipTV, select the appropriate button at the top of the posting window and enter the URL of the video.

Your video should appear on the page like the one below:

Dwight Teeter talks about how we got the First Amendment (2:43):


Get a FREE copy of Kill the Quarterback

Get a free digital copy of Jim Stovall's mystery novel, Kill the Quarterback. You will also get Jim's newsletter and advanced notice of publications, free downloads and a variety of information about what he is working on. Jim likes to stay in touch, so sign up today.

Powered by ConvertKit

Leave a Reply

Your email address will not be published.