Resize an image to create a thumbnail
Find an image that would be useful in a subject that you teach, but really best presented at 800 pixels wide or wider. The best way to present this is on it’s own web page, but a thumbnail image (a smaller version of the original) is a good intuitive way to present a preview and link to the larger version.
Use the Creative Commons search area at Flickr or create your own image – make sure it’s at least 800 pixels wide but no more than 2000 pixels wide (you don’t want too much scrolling). Use Gimp, SumoPaint or another program to resize a version of your image that is no more than 150 pixels on its widest side (sometimes it’s more effective to use a small cropped version of the original image). Upload your image to your blog in the media library and note it’s URL. Place the smaller version of your image in a blog post and link it to the original version’s URL.
Thumbnail Example
Here is an example of a thumbnail leading to the full-size image. As this landscape image would be difficult to recognize as a standard thumbnail I’ve mae a thumbnail from a reduced crop of one feature in the original image.
I always use ‘target=”_blank”‘ to make links open in a new window for anything that isn’t internal to a website. In this example I uploaded both my images to the Media Library for the course blog site. I captured the URL for each image in the box to the right on the ‘edit’ page for those images and used them in the code below. Also note that I used the ‘alt’ and ‘title’ attributes of the image tag to let users that hover over the thumbnail know that clicking on the image will lead to the full-size version.
<a href="http://courses.olblogs.tru.ca/eddl5131-jan15/files/2015/02/jdf.jpg" target="_blank">
<img src="http://courses.olblogs.tru.ca/eddl5131-jan15/files/2015/02/jdf-sm.jpg" width="120px" height="90px" alt="View on Juan de Fuca Trail – Click to Enlarge" title="View on Juan de Fuca Trail – Click to Enlarge" />
</a>
