Create TimThumb IMG-tags with correct with and height attributes with this simple function for WordPress

TimThumb is a nice PHP-script that resizes image.

I’ve written a function for WordPress that takes the ID of an attachment and returns a full img-tag, including the correct width and height attributes, together with all required TimThumb arguments of course.

With no width and height values set, the page will be redrawn several times, resulting in a very ”jumpy” page. Using this function to create your image tags will solve this problem.

Also, if you don’t have any width and height atributes in img-tags it can lead to errors when JavaScript ondomready calculations are made, beacuase sometimes the images are still loading and therefor JavaScript can’t determine the width or height of the images.

Usage

<?php
// echo a complete img-tag where the image will be resized to a width of 100px
echo ma_image_thumb("id=123&w=100&tag=1");
<pre>// echo a complete img-tag where the image will be resized to 75x75, and add the alt attribute
echo ma_image_thumb("id=123&w=75&h=75&tag=1&alt=Image alternative description");
</pre>
?>

The function

/*
* Get the source for a resized image
* if args["tag"] is true then a complete img-tag including width and height is returned
*
* @requirement timthumb.php must be in /<your-template-path>/inc/timthumb.php
* @param array/querystring $args. required are id = the post id for the attachment
* @return string Complete image tag or just the value to be used as src
* Align:
* c : position in the center (this is the default), t : align top, tr : align top right, tl : align top left, b : align bottom
* br : align bottom right, bl : align bottom left, l : align left, r : align right
*/
function ma_image_thumb($args = "") {

    $defaults = array(
    	"w" => "0",
		"h" => "0",
		"q" => 75,
		"a" => "c", // align
		"alt" => "", // alt-attribute
		"tag" => false, // return scr wrapped in tag?
		"id" => null, // get src from file
		"src" => null
    );
    $args = wp_parse_args($args, $defaults);

	$out = "";

	$file_id = (int) $args["id"];
	if ($file_id) {
		 // $post_file = get_post($file_id);
		 if (!$file_id) {
		 	return "";
		 }
		 $src = wp_get_attachment_url($file_id);

	} elseif ($src) {
		// already a path..
		// @todo: this!
		return "";
	}

	$w = (int) $args["w"];
	$h = (int) $args["h"];
	$q = (int) $args["q"];
	$a = $args["a"];

	// TimThumb
	$thumb_src = get_bloginfo("template_url") . "/inc/timthumb.php?w=$w&amp;h=$h&amp;a=$a&amp;q=$q&amp;src=$src";

	if ($args["tag"]) {

		// Get original width and height
		$image_info = wp_get_attachment_metadata($file_id);
		$width = $image_info["width"];
		$height = $image_info["height"];
		$new_width = $w;
		$new_height = $h;
		// generate new w/h if not provided
		if ($new_width && !$new_height) {
			$new_height = $height * ($new_width / $width);
		} elseif ($new_height && !$new_width) {
			$new_width = $width * ($new_height / $height);
		} elseif (!$new_width && !$new_height) {
			$new_width = $width;
			$new_height = $height;
		}
		$alt = $args["alt"];
		$out = sprintf("<img src='%s' alt='%s' width='%d' height='%d' />", $thumb_src, $alt, $new_width, $new_height);

	} else {
		$out = $thumb_src;
	}

	return $out;

}