This post is about using TimThumb to create an on-the-fly, greyscale image thumbnail of the first image in a post and use jQuery to fade in a colour version on top creating a nice effect.

Let me also say that this is not in-depth and is not for beginners as I’m not going to walk you through each step, merely give you an overview.

If you want to see a demo then look at my homepage as I’ve used this effect there and on my search & post lists. As the thumbnails are created on-the-fly and not during image upload, you can use this technique anywhere you like! Why there isn’t a plugin for this I don’t know.

Things you will need:

1. TimThumb.php
2. Get the Image script (includes a TimThumb.php in a package file)
3. jQuery
4. WordPress

Put TimThumb.php in your theme folder in /scripts/ (create this folder if it doesn’t exist)

Follow this tutorial to get TimThumb and Get The Image working in wordpress. It’s as simple as copying the script to your functions.php file (or create one if you don’t have one).

Link to jQuery (there is a way to link to the jQuery library that comes with WordPress but I prefer to link to the one hosted on Google)

To view all the code, simply hover over it.

Link to jQuery

Add the following to your header template to link to the Google Code hosted jQuery library:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js" type="text/javascript"></script>

The PHP

This goes in your template file

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<div class="home-thumb">
<a class="post-thumb-a" href="<?php the_permalink(); ?>"><?php echo get_image(150, 306, '2'); ?></a>
<a class="post-thumb-b" href="<?php the_permalink(); ?>"><?php echo get_image(150,306,''); ?></a>
</div>
<?php endwhile; endif; ?>

This should be generally familiar to WordPress people but it’s saying if there are posts, while there are posts, get the information within the post. More information can be found on the WordPress Codex about The Loop. The permalink links to the url of the post (can be any link destination though) and inside the link we call the function you should have pasted into your functions file – get_image(). The arguments are ‘height’, ‘width’ and ‘filter’. I have yet to find a list of all the filters supported by TimThumb but for this you’ll only need filter 2 – greyscale.

So get_image()  gets the first image in the post and crops it to the dimensions inside the callback (in this case a height of 150px and a width of 306px but you can choose any size that is smaller than the image in the post). The third number is calling a filter from TimThumb which creates a greyscale thumbnail of the image. Then we duplicate this call but remove the ’2′ so we get the full colour thumbnail. We do this so that we can position them one on top of the other and fade one in creating a cool transtion.

The class ‘.post-thumb-a’ should be on the link containg the greyscale image & the class ‘.post-thumb-b’ goes on the link containing the colour image. This is important as ‘.post-thumb-a’ will be placed on top to hide the colour image and will be faded out to reveal the colour image.

The CSS

This positions the images and title correctly

.home-thumb {

	overflow:hidden;

	position:relative;

	width:306px;

	height:150px;

}

a.post-thumb-a img, a.post-thumb-b img {

	position:absolute;	

	top:0;

	left:0;

}

a.post-thumb-a img {

	z-index:10;

}

What the CSS does is position ‘post-thumb-a img’ (the image inside the link) on top (z-index:10;) of post-thumb-b img. This needs to be inside a div as it uses an absolute position to make sure they are pixel perfect overlayed. Make the parent div the same height and width as the thumbnail size you specified in the get_image() callback above.

If you test this now, you should see the greyscale image and not the coloured on — that’s because they coloured one is hidden underneath.

The Javascript

This goes in the header.php template of your WordPress theme

<script type="text/javascript">

jQuery(document).ready(function($){

	$(".home-thumb a img").hover(

		function() {

			$(this).stop().animate({"opacity": "0"}, 800);

			},

		function() {

			$(this).stop().animate({"opacity": "1"}, 800);

			});

});

</script>

The Javascript selects ‘.home-thumb-a img’ (the greyscale image within the link, the one hiding the coloured image) and sets the opacity to ’1′ until the mouse hovers over it, then change the opacity to ’0′ over the time of 800 ms (1000 ms = 1 second) to reveal the colour image, creating a colour fading effect.

That’s it, you’re done. Now have a play around. I’ve added a title tag in mine.

If I’ve made a mistake anywhere here please let me know and I’ll make sure to change it. Any questions and I’ll be glad to help.

After much arguing through many emails I have decided to defer my vote to someone else as it’s getting heated. Just need someone to make a creative decision who is higher up in the hierarchy than we are.

Forgetting all of that stuff, I have redesigned my website, business card and all pdf documents and updated my ‘brand’ since doing that for the final degree exhibition. I changed the colour to 100% Magenta instead of orange but kept the same font The portfolio section is now up with proper descriptions, pictures and styling (with some more projects to come when I get a chance).

My business card can be seen below and yes I am aware that the back of the card has the wrong corners rounded in the image.

While at Samsung I noticed that my new website design did not look correct in IE6 (no surprise there then) so I spent some time correcting some CSS problems. No sooner than I had done that than I tried it in Safari and it failed even more to display correctly.

After several hours trying to figure out what the problem was, changing (and improving) my CSS stylesheet I discovered that even though I zero’d all margins at the start of the CSS by:

* {margin:0px; padding:0px}

Safari is a bitch and does not recognise that. So after several hours of trying, finally declaring the padding and margins as 0 for ul and li elements as well as entire divs, the formatting magically came into alignment in Safari.

After doing all that, feeling like I needed to vent some of my frustration and being British I wanted to write a strongly worded letter to Mr. Jobs. Instead I am blogging about it. This in itself proved more difficult than first anticipated as when I logged into Worpress, the visual text editor for the post screen had gone and all the text was coming out in white! After a quick Google and a re-install of WordPress 2.8 the editor came back and I can see what I’m writing now.

I have just received an HTTP error while uploading my business card image. Seriously what is going on with the internet tonight?

Now the reason I am blogging at this late hour and not in bed, asleep in preparation for work tomorrow is simple… There are people in my house who I don’t know, playing very loud music. I hope tomorrow is a better day.

The interface has been reorganised but does seem a little crammed in on the admin page, other than that though I really like the way everything has been set out with the menu on the left. The other change is that all post contextual elements are on the right, so categories, date and time, security and save functions. As they are located in a different place, it took me a while to find them but this is probably just because I am used to the older version. All in all I think the next release will have a much more corporate feel to it and add some much better organisation. Only time will tell if the blogging community accept it. For no though, I am happy with the current version (even though I can’t get the flash uploader to work, but thats a different story).

This is a very apt phrase at the moment as I have been learning php and the first thing it was used for is to echo “Hello World!”. It is also appropriate as I have managed (after much tweaking) to use WordPress and my own domain to host my own blog… so to anyone who is reading this – Please see above!