Sizing images to thumbnail size in WordPress - php

Question

I'm building my first WordPress Theme and I'm stuck on something.
I have a function in my functions.php called get_first_photo() which grabs the first image uploaded on each post and puts it on the blog archive page. It's working fine, but it loads the full-sized image and resizes it using CSS. I would rather it load the image at it's thumbnail size set in the WP control panel so I don't have the image-size overhead. Any way to accomplish this?
Here's the code from functions.php:
function get_first_photo($id) {
global $wpdb;
return $wpdb->get_var("SELECT guid FROM wp_posts WHERE post_parent = $id AND post_mime_type = 'image/jpeg' ORDER BY id DESC LIMIT 1");
}
And here's the blog template:
<?php
get_header(); ?>
<div id="content" class="blog">
<div id="body">
<h3 class="title" id="blog">The Ned Leary Blog</h3>
<?php if (have_posts()) :
query_posts("category_name=blog");
while (have_posts()) :
the_post();
$first_photo = get_first_photo(get_the_ID());
?>
<div class="snippet">
<?php if (!empty($first_photo)) : ?>
<img src="<?php echo $first_photo; ?>" alt="Thumbnail" />
<?php else : ?>
<img src="<?php bloginfo('url'); ?>/images/blog/gravatarBig.jpg" alt="Ned Leary Gravatar" />
<?php endif; ?>
<div class="details">
<h2><?php the_title(); ?></h2>
<h5><?php the_time('D, M j, Y') ?> by <?php the_author('') ?> | <?php comments_popup_link('0 Comments', '1 Comment', '% Comments'); ?></h5>
<?php the_excerpt(); ?>
<h4>Read more…</h4>
</div>
</div><!--end snippet-->
<?php endwhile; endif;// end of the loop. ?>
</div><!--end body-->
<?php get_sidebar(); ?>
</div><!--end content-->
<?php get_footer(); ?>

Answer 1

All you need is to grab the post ID for that first image you want and then run it through "get_the_post_thumbnail()".
$first_photo = post id of the first image;
echo get_the_post_thumbnail( $first_photo );
You can also pull your own custom thumbnail sizes if you like as well. As long as you are using wordpress 2.9+.
Simply add this to functions.php
add_theme_support( 'post-thumbnails' ); //enable thumbs
add_image_size( 'mycustom-preset', width you want, height you want); //custom size
Then run the same function but call your new preset...
$first_photo = post id of the first image;
echo get_the_post_thumbnail( $first_photo, 'mycustom-preset' );
http://codex.wordpress.org/Function_Reference/get_the_post_thumbnail
http://codex.wordpress.org/Function_Reference/add_image_size
Hope that helps. It doesn't seem like your having trouble obtaining the post id for the first photo so I didn't really cover how to obtain it.

Answer 2

You can use GD or some other image library to programmatically manipulate an image. However, it would be best to implement an operation to create a thumbnail file when the image is uploaded. You can have it dynamically generate a thumbnail every time the page is loaded, but such an operation can be relatively computationally expensive and put unneeded load on the ssystem.

Answer 3

Thanks to John Ford for pointing me in the right direction, I was able to figure this out.
The query in my function changed slightly, grabbing the post id instead of guid.
function get_first_photo($id) {
global $wpdb;
return $wpdb->get_var("SELECT id FROM aire_posts WHERE post_parent = $id AND post_mime_type = 'image/jpeg' ORDER BY id DESC LIMIT 1");
}
And then I had to add another line to my theme file:
$first_photo = get_first_photo(get_the_ID());
$thumb = wp_get_attachment_image_src($first_photo);
Lastly, I updated my image src:
<img src="<?php echo $thumb[0]; ?>" alt="Thumbnail" />

Answer 4

you could use the get_the_post_thumbnail function or use a php thumbnail generator like timbthumb
<?php $images = get_children( array( 'post_parent' => $page->ID, 'post_type' => 'attachment', 'post_mime_type' => 'image', 'orderby' => 'menu_order', 'order' => 'ASC', 'numberposts' => 999 ) );
if ( $images ) {
$total_images = count( $images );
$image = array_shift( $images );
$thumbnail = wp_get_attachment_image_src($image->ID, array(225,125) );
$thumbnail = $thumbnail[0]; }
?>
<img class="size-thumbnail alignleft" src="<?php echo $thumbnail; ?>" alt="<?php echo $page->post_title ?>">