WordPress thumbnail script

I have been working on making WordPress themes over the past few months. I have redesigned Look Web Design using a new design and based on the WordPress framework. I made the design from scratch in Photoshop and then cut-up the design for Dreamweaver, it was an excellent learning process and I was pleased with the result as a showcase for my websites. I worked hard to keep to the original design created in Photoshop.

I had designed the opening page to be a small rectangular thumbnail for every new post (last 3 websites created). When I used the_post_thumbnail() function (new for WP 2.9.x), it didn’t retain the shape I wanted from the thumbnail. So to fix this I had to either ensure that every image uploaded was able to be resized and retain proportions (660px x 474px, 440px x 316px) to a thumbnail size of 220px x 158px. This would mean that if I sold this website the user would have to do the same, this would be impractical. The content ‘breaking’ the design is would be a hurdle I would have to overcome.

After some Google searches I found and started work on a script called Timthumb (URL) (Google Code URL) to resize the image and cropping it if the normal resize proportions would not allow cropping and still show the whole image. It is a clever piece of code that ‘zooms’ in and crops the image dynamically to retain the thumbnail size:


A 100×100 Pixel image zoom cropped dynamically:

A 440×316 Pixel image dynamically cropped:

I renamed the script to thumb.php in the theme folder and called it like this:

<img src="wp-content/themes/lwd/thumb.php?src=<?php echo $src[0];?>&amp;w=220&amp;h=158&amp;zc=1" alt="" />

I passed it the parameters ‘w=220&amp;h=158&amp;zc=1‘ for the output size of the thumbnail and ‘zc=1‘ to zoom crop the image.

The code before the thumb.php call:

<?php $src = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), array( 660,474 ), false, '' ); ?>

was the source image that is first resized down to 660×474 then to 220×158 by thumb.php.
This works great except that the to show the thumbnail on the post page (single.php) you would have to manually add the image below the text.
<?php the_content; ?> Would not show the thumbnail image, so to add a larger version of the thumbnail image below the post I added this code:

<a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php $src = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), array( 660,474 ), false, '' ); ?><img src="wp-content/themes/lwd/thumb.php?src=<?php echo $src[0];?>&w=220&h=158&zc=1" alt="" /></a

The code might look a lot to take in at first but all you are doing is calling the thumb.php page every time you want to display an image and still retain control of the layout.

The single.php code:

<?php $src = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), array( 660,474 ), false, '' ); ?>
<a class="lightbox" href="wp-content/themes/lwd/thumb.php?src=<?php echo $src[0];?>&w=660&h=474&zc=1" title="<?php the_title(); ?>"><img src="wp-content/themes/lwd/thumb.php?src=<?php echo $src[0];?>&w=440&h=316&zc=1" alt="<?php the_title(); ?>" /></a>

is the same as the index page call, it gets the source of the image and the 660,474 is the size of the image that will show up in the lightbox, again retaining control of the image sizes.
Adding class="lightbox" manually means that the image will open in lightbox (I am using flexible lightbox).

One issue I still have left remaining with the timthumb script is the cache, for some reason the cache is creating .png files and not .jpg, yet on the page where the script is called a .jpg image is created, I have posted this query on the issues page for timthumb (here), but hopefully this issue will be fixed soon especially as I am creating 3 unnecessary png files (for every jpg) that are not required.