Chad Von Lind » Website Designer, WordPress Programmer & Theme Developer – Chad Von Lind

Display All Attached Images to a WordPress Post

Chad Von Lind — Tue, 29 Mar 2011 20:29:39 +0000

This will allow you to use Timthumb while showing all images within a WordPress post gallery. In other words, if I upload 4 photos to a post, they will automatically be shown wherever I insert this code in my template, within that post’s loop.

This is assuming that the timthumb script is in your theme’s directory: wp-content/themes/mytheme/timthumb.php


$args = array( 'post_type' => 'attachment', 'orderby' => 'menu_order', 'order' => 'ASC', 'post_mime_type' => 'image' ,'post_status' => null, 'post_parent' => $post->ID );
$attachments = get_posts($args);
	if ($attachments) {
	foreach ( $attachments as $attachment ) { ?>
       bloginfo('template_url'); ?>/thumb.php?w=200&h=200&zc=1&src= echo wp_get_attachment_url( $attachment->ID , false ); ?>" alt=" the_title(); ?>" width="200" height="200" border="0" />
	}
	} ?>

To have each thumbnail link to the full sized original image, have the anchor href point to

 echo wp_get_attachment_url( $attachment->ID , false ); ?>

Timthumb and Shortcodes for Easy WordPress Images

Chad Von Lind — Thu, 12 Aug 2010 21:51:50 +0000

Here’s a quick and easy way to update image sizes on the fly directly in your WordPress posts. Add this code into your functions.php file in your theme. Then make sure you insert timthumb.php in the root of your theme directory. Next create a fully writable directory named ‘cache’ and place that in your theme root directory.

Now inside your posts just wrap an image URL with the img shortcode. Add height, width, alt, and class to it for more flexibility.

7/15/2011 – Updated to allow use within a text widget.

// Image resize in content
// To Use: {img w=600 h=200 class=alignleft alt=My Photo}http://mysite.com/photo.jpg{/img}
function timmyimg($atts, $content = null) {
	extract(shortcode_atts(array(
		'w' => '600',
		'h' => '250',
		'class' => 'alignnone',
		'alt' => ''
	), $atts));
	return ". get_bloginfo('template_directory') . "/timthumb.php?src=".$content."&w=".$w."&h=".$h."' alt='".$alt."' class='wp-post-img ".$class."' />";
}
add_shortcode('img', 'timmyimg');
 
// Allows this shortcode to work within a text widget
add_filter('widget_text', 'do_shortcode');

Adding TimThumb To Your WordPress Theme

Chad Von Lind — Fri, 27 Jun 2008 19:38:06 +0000

TimThumb PHP Script is a custom image-sizing script, that allows you to produce a cropped and sized version of an image. These are great to use along with a WordPress Magazine Theme. TimThumb has recently been released as open source, and here I will walk you through adding TimThumb to your WordPress theme.

Using TimThumb will require the use of WP Custom Fields.

01. Setting Up The Script

Lets grab the TimThumb.php source code, and save it to our theme directory.

To keep things organized, lets save it in a scripts directory in our theme.

yourdomain.com/wp-content/themes/your-theme/scripts/timthumb.php

Now create a new directory inside of scripts, and name it “cache”

yourdomain.com/wp-content/themes/your-theme/scripts/cache/

Make sure that both directories /scripts/ and /cache/ are set to 755 so they’re writable by the server.

02. Adding The Call To Our Theme Template

Depending on whether you use home.php or index.php, open the appropriate template file up, and lets find The Loop. Look for the calll to the post title, and lets insert the call somewhere below the title, or meta information.

I’m presenting you with 3 options for the call. You can pick which one might suit you best.

Option 01 – Show Image Only

         // This will show only the image. Alter the width and height (in both places) to your needs. ?>
 
 if ( get_post_meta($post->ID, 'thumb', true) ) { ?>
	
		 bloginfo('template_directory'); ?>/scripts/timthumb.php?src= echo get_post_meta($post->ID, "thumb", $single = true); ?>&h=150&w=150&zc=1" alt=" the_title(); ?>" width="100" height="57" />
	
 } ?>

Option 02 – Show image, and link image to post

         // This will show the image and link the image to the post. Alter the width and height (in both places) to your needs. ?>
 
         if ( get_post_meta($post->ID, 'thumb', true) ) { ?>
	
		 the_permalink(); ?>" rel="bookmark" title="Permanent Link to  the_title(); ?>"> bloginfo('template_directory'); ?>/scripts/timthumb.php?src= echo get_post_meta($post->ID, "thumb", $single = true); ?>&h=150&w=150&zc=1" alt=" the_title(); ?>" width="150" height="150" />
	
 } ?>

Option 03 – Show image and link image to URL of your choice. Requires additional custom field of “imglink”. Could be used for outgoing links, or linking a thumb to a full version of the image. This option would work best inside of your single.php template.

 	// This will show the image and link it to anything you place into another custom field of "imglink".
		// Alter the width and height (in both places) to your needs.
  ?>
 
 if ( get_post_meta($post->ID, 'imglink', true) ) { ?>
	
		 echo get_post_meta($post->ID, "imglink", $single = true); ?>" rel="bookmark" title="Permanent Link to  the_title(); ?>"> } ?> bloginfo('template_directory'); ?>/scripts/timthumb.php?src= echo get_post_meta($post->ID, "thumb", $single = true); ?>&h=150&w=150&zc=1" alt=" the_title(); ?>"  /> if ( get_post_meta($post->ID, 'imglink', true) ) { ?> } ?>
	
 } ?>

03. Making Use of Custom Fields

In your post go ahead and upload your image.
In the “LINK URL” input, highlight and copy the entire address of the image you just uploaded.
Close the image manager, and open the Custom Fields box down below.
For the key enter thumb.
For the value, paste in full address of the image we just copied. ie: http://your-domain.com/wp-content/uploads/2008/02/my-image.jpg
*For Option 03 – if you want to link the thumb to a url, you’ll need to add a new custom field with a key of “imglink” and paste in the URL as the value. See example below.

Need Help?

Please visit the Timthumb Support Forums.