Using the New Post Image Function in WP 2.9 to Build a Featured Content Gallery

Now that WordPress lets you upload an image and crop it and set it as the post thumbnail you can do a lot of cool things with it.
All you have to do is add support for the function into your functions.php file and then use the set thumbnail option in the Post editor to have post thumbnails. I set it up today and then used the new function to build a featured content gallery. I went looking to find the code & I read a lot of tutorials but didn’t find any about using post thumbnails and the Loop to build content galleries, so I made my own.

View a Demo

This is the code to add that adds theme support for the new post thumbnail template tag -paste it into functions.php Template Name: Theme Functions
[php]
if (function_exists(‘add_theme_support’)) {
add_theme_support(‘post-thumbnails’);
set_post_thumbnail_size(500, 300, true);
}
[/php]

500 px by 300px in set_post_thumbnail_size is not exactly a thumbnail sized image, but it’s what I needed for the content gallery. Because they look good if the images are that size.You can make it 150 by 150 or any other dimensions you want. You don’t have to set an image size in functions.php but if you do you can override these settings per template by adding this code to your Loop:
[php]
<?php the_post_thumbnail(array( 260,200 ), array( ‘class’ => ‘center’ )); ?>
[/php]

That adds a thumbnail image to the post with class “center”. You can name the class anything you want: class=”floopdedoo” if that’s your thing.

You have to add the template tag to every file you want a post thumbnail to show.

It’s not retroactive, adding the tag tonight won’t automatically add post_thumbs to posts you added last week. I could explain it more but that is not the fun part.
For more examples on how to use this new tag, go to this site.

The fun part, building a featured content gallery:

[php]
<div id="gallery">
<div id="slider">
<div id="sliderContent">
<?php
query_posts(‘cat=12’);
if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
<div class="sliderImage"><?php the_post_thumbnail();?><span class="right"><h2 class="post_title"><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2><br/><?php the_excerpt();?></span></div>
<?php endwhile; ?>
<div class="clear sliderImage"></div>

<?php else : ?>
Sorry, but you are looking for something that isn’t here.
<?php endif; ?>
</div>
</div>
</div>
[/php]
So if you’re familiar with WordPress you can see that that is a Loop up there. So you’ll probably say hey wait all my theme files already have a loop in them! So you’ll have to figure out for yourself where you can use this. There’s a lot of documentation on modifying the WordPress Loop and in order to keep this post short I’ll just send you to go look for it:

Yes, I know the markup is a ugly. Not be the best idea to wrap a heading tag with a span tag. You need to clean it up if you have to be 100% standards compliant. For my fast and dirty needs it worked but I’ll clean it up before we go to production. See where it says cat=12? That’s because I wanted to make a featured content gallery out of the posts in category 12.

Here’s code for a content gallery for a Loop with no category designated:

[php]
<div id="gallery">
<div id="slider">
<div id="sliderContent">
<?php
if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
<div class="sliderImage"><?php the_post_thumbnail();?><span class="right"><h2 class="post_title"><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2><br/><?php the_excerpt();?></span></div>
<?php endwhile; ?>
<div class="clear sliderImage"></div>

<?php else : ?>
Sorry, but you are looking for something that isn’t here.
<?php endif; ?>
</div>
</div>
</div>
[/php]

Next thing you want to do is download the gallery code from here:

http://www.serie3.info/s3slider/
You should look at the demos and view the page source. They explain how to implement the slider and stuff. If you have trouble with it there are many tips over there.
You get the CSS to style the content gallery from that site,too.

I put the javascript in the footer.php of my theme like this:

[html]<script type="text/javascript" src="/wp-content/js/jquery-1.3.1.min.js"></script>
<script type="text/javascript" src="/wp-content/js/s3Slider.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(‘#slider’).s3Slider({
timeOut: 5000

});
});
</script>
[/html]

Download both templates: [download id=”8″]