I thought I would write up a little how-to for those of you who want to post pictures on your blog.
First of all, you need somewhere to host your pictures, Blogger does not provide image hosting. I suggest your personal webspace provided by your ISP. You will need ftp software to upload your pictures. I suggest
WS_FTP LE 6.0, it is very easy to use. Just make sure you are a
student when you set it up. If anyone needs help setting up or using ftp software mention it in your comment and I will help you out.
You will need a thumbnail for your picture(s), you can use an image editing program like Adobe PhotoShop and simply resize the image yourself, or use a thumbnail generation tool like one of the ones found
here.
Once your pictures(s) are uploaded you will need to create an html page to display the picture(s). Here is the code that I used to display the lily.jpg from my earlier post:
<html>
<head>
<title>Lily - photo by Christine MacKinnon</title>
</head>
<body topmargin="0" leftmargin="0">
<img src="lily.jpg" width="800" height="594">
</body>
</html>
If you have multiple pictures you can simply copy the file, change the image name, and save it with a new filename.
Now you will need a link for your post. The link must point to the html file(s) that you created and it must use the complete path to the webserver that the file resides on. There are a couple of ways to do this. The following link will open up the picture in a new, full size browser window:
<a href="http://personal.nbnet.nb.ca/pjmackin/lily.html">
<img src="http://personal.nbnet.nb.ca/pjmackin/lily.jpg" border="0">
</a>
The second way is to use a javascript link. This will allow you to control the size of the new browser window as well as control what aspects of the window will be displayed (toolbars, address bar, etc...):
<a href="http://personal.nbnet.nb.ca/pjmackin/lily.html" onClick="MyWindow=window.open ('http://personal.nbnet.nb.ca/pjmackin/lily.html','MyWindow','toolbar=no, location=no,directories=no,status=no,menubar=no,scrollbars=no, resizable=no,width=800,height=594'); return false;">
<img src="http://personal.nbnet.nb.ca/pjmackin/lily_thumb.jpg" border="0">
</a>
You can see in the above code that I am setting the size of the browser window to be the same size as the actual full size image, in this case 800 x 594. I am also disabling all toolbars and menu items, etc...
So there you have it, use these steps to post pictures on your own blog... Remember, you can't post html in a comment so if you want to post your own pictures you will need your own blog. If anyone has any pictures that they would like me to post just let me know...
