Posting Image
Unlike posting video to ehub, images do not require you to generate any additional code after you’ve uploaded your file. But you still have to use the div code.
In the Uploading Image tutorial this is the code that pops-up after uploading the image…
<img alt="choose-file.png" src="http://reporting.journalism.ku.edu/ spring06/kuhr-musser/media/choose-file.png" width="211" height="31"/>
The major difference between posting video and images is that your video should always be the same dimensions. Your still image will not. That means you will need to add a width for your div code. For this example the image is 211 pixels wide. Your image should not be larger than 400 pixels wide, but it may be smaller. Just change the number in the following example code to be the width of your pictures.
So, if you want your image on the left use <div class="floatleft" style="width:211px">
And if you want your image on the right use <div class="floatright" style="width:211px">
For this example we will put the image on the left side of the web page. Insert the div code at the beginning of the code given to you when you uploaded the file. For the example code it would look like this…
<div class="floatleft" style="width:211px"><img alt="choose
You also need to close your div code at the end of the entire code. So, the end of the example code would look like this…
"211" height="31"/></div>
One final thing you need to do is include a cutline and photo credit before your closing div code. The <br /> gives you a line break in between your cutline and photo credit. The <em> tag is used around the photo credit for italics. This goes right before your closing div code and would look like this…
"211" height="31"/>Cutline goes here<br /><em>Photo: John Doe</em></div>
When you put it all together the example code will look like this…
<div class="floatleft" style="width:211px"><img alt="choose-file.png" src="http://reporting.journalism.ku.edu/ spring06/kuhr-musser/media/choose-file.png" width="211" height="31"/>Cutline goes here<br /><em>Photo: John Doe</em></div>
And the picture would be displayed like so…
Cutline goes herePhoto: John Doe