You want a jQuery slideshow for your WordPress blog? - on the front page, or maybe in the sidebar? No real problem, all the javascript is taken of with the help of a jQuery plugin, all we have to do is figure out how to get the post data.

And to keep things really simple, this is going to use the thumbnail functions in WP 2.9 – no need to mess around with custom fields any more.

Firstly, you do have to explicitly declare the new thumbnail system in functions.php – and best to wrap it up in an “if function exists” to avoid problems for older WP installs.

if (function_exists('add_theme_support')) {
add_theme_support( 'post-thumbnails' );
add_image_size('slideshow-image', 300, 160); // for front page slideshow
}

The smart move is to define a “Featured” category – any post in that category will be available for the slideshow, and that’s the selection taken care of. Create a category – call it featured, or anything, but make a note of the cat_ID – mouseover a category on the admin categories page and it’ll be in the url, something like:

http://testblog.com/wp-admin/categories.php?action=edit&cat_ID=3

The ordering will be by date, newest first. (Don’t forget you can tweak the timestamp of a post if you really want to just to get the order exactly as you want it).

So create a couple of posts in this category and add some thumbnails to them – since our slideshow is going to be 300px by 160px, make sure they’re bigger than that. Then, in home.php, or index.php, where ever you want the slideshow to appear, add:

<?php

$featured_category_id = 3;
$number_of_posts = 4;

$args = array('showposts'=>$number_of_posts, 'cat'=>$featured_category_id);

$slideshow_query = new WP_Query($args);

?>
<div id="slideshow">
<?php
// let's keep a record of the post IDs as we go, in case we want to omit these from other post loops/lists on the same page
$duplicates = array();

while ($slideshow_query->have_posts()) : $slideshow_query->the_post();

//add the ID to the duplicates array for future reference
$duplicates[] = $id;

//test to see whether there's a thumbnail associated with the post
if (has_post_thumbnail()) {
?>
<div class="post-thumbnail">
<a href="<?php the_permalink(); ?>">
<?php	the_post_thumbnail('slideshow-image'); ?>
</a>
</div>
<?php	}
endwhile;
?>
</div>  <!-- end of #slideshow -->

Next, some javascript. We can use the excellent jQuery Cycle Plugin – as the package stands currently, we’ll use jquery.cycle.all.min.js – which allows all the possible transition effects etc. – in practice, you may well want to use the lighter versions…

* For a standard production site, always use min = minified, rather than pack = packed – pack may be a smaller filesize, but it doesn’t run quicker….

We need a very quick script to configure and activate the plugin – so create a new file, slideshow-activate.js

jQuery(document).ready(function($){
$('#slideshow').cycle({
fx: 'fade' // choose your transition type, ex: fade, scrollUp, shuffle, etc...
});
});

Later, there are lots of options here, transition speed, pausing etc. – consult the plugin pages for ideas.

We need to get our scripts on the WordPress page, and indicate that they depend on jQuery being loaded – making use of the WordPress functions wp_register_script and wp_enqueue_script – so in functions.php

add_action('wp', 'js_head_load');

function js_head_load(){

if(is_admin()) return;  //so that we're not loading unecessary scripts in the admin

wp_register_script('cycle', get_bloginfo('template_directory')  . '/scripts/jquery.cycle.all.min.js', array('jquery'), '1.0');

wp_enqueue_script('slideshow-activate',  get_bloginfo('template_directory')  . '/scripts/slideshow-activate.js', array('jquery', 'cycle'), '1.0');

}

And then, don’t forget to put the 2 files into /scripts in your theme folder…

That should give you a working slideshow – ready to be styled with some CSS. Note that the way the Cycle plugin works is that it looks to rotate the immediate children of the div being called – here, they’re images, they could be eg. divs – so if you add a wrapper div(s) you may need to adjust slideshow-activate.js.

And if it’s not working, check first that the right scripts (jQuery, Cycle, slideshow-activate) are actually being loaded and in the right order, by looking at the page source – and check you’ve got thumbnails attached to the relevant posts…

You could go on to tidy this up – avoiding the hard-coded category id by having something in the theme options admin to change the id for example. Also, as said earlier, there’s a lot of scope in playing with the plugin parameters to get exactly the slideshow you want…

Lastly – the record of the duplicates we kept – the method for omitting them from subsequent Loops of posts is here: Multiple WordPress query duplicates

With WordPress 2.9 comes a revised image thumbnail system – previously, support for posts with attached thumbnails was a little haphazard (it is a fiddly business in terms of the programming), but this is a significant step forward.

The need is for a series of images, of given size, associated with a series of posts – maybe for a front page with post excerpts and their images, or for a featured posts slideshow. Before 2.9, every theme developer had a different way of doing it – some with patent recipes for determining (guessing) which thumbnail was attached to which posts, while other themes required the web admin to add a thumbnail custom meta field manually, a bit tiresome.

add_theme_support()

Firstly, you do have to explicitly declare the new thumbnail system in functions.php – and best to wrap it up in an “if function exists” to avoid problems for older WP installs.

// to prevent  WP < 2.9 breaking
if (function_exists('add_theme_support')) {
add_theme_support( 'post-thumbnails' );
}

This produces a whole new little widget on admin post edit pages. In terms of admin, you can now attach a thumbnail image to a post using this widget, (or by adding an image via the media gallery, as before), and then taking the “Use as thumbnail” option

Usage

Now, you have the has_post_thumbnail() and the_post_thumbnail() template tags available – so in the post loop, say for home.php

<?php if ( has_post_thumbnail()) { ?>

	<div class="thumbnail">
		<a href="<?php the_permalink(); ?>">
		<?php the_post_thumbnail(); ?></a>
	</div>

 <?php	} ?>

has_post_thumbnail() tests whether a thumbnail exists for the post – if so, go on to display it with the_post_thumbnail(). You could also add an else here and go to display a default image if there isn’t a thumbnail

So far so good – but what size are the thumbnails going to be?

Sizing Thumbnails

This is where the complications arrive – but the good news there’s now various ways to control the whole system, giving you a better chance of getting what you want, fairly painlessly… There’s 3 main ways of doing it.

First, you can specify the image dimensions directly as variables in the template tag

	the_post_thumbnail(array(150,90));

Note that the variable is an array. This method is fine enough if the theme is simply using one size of thumbnail – it does give some odd results if you start elaborating, with different sizes on different pages, so…

Secondly, back in functions.php

if (function_exists('add_theme_support')) {
add_theme_support('post-thumbnails');
set_post_thumbnail_size(150, 90, true);
}

The set_post_thumbnail_size gives a default, here 150px width, 90px height – the 3rd variable is the “hard-crop” flag mode. 2 ways to go here, box-resizing (flag= false) and hard-cropping (flag=true).

Box resizing = shrinks an image until it fits the width or height value you’ve specified. So with this method, you always get the whole image in the thumbnails, but the thumbnails themselves might turn out to be different sizes, width or height.

Hard-cropping = the image is cropped to match the aspect ratio – width : height – and then shrunk to fit. So here you get all thumbnails the same size, but they may be missing cropped parts top/bottom or left/right. In practice, for general theme development, this is usually the best way to go.

Thirdly for sizing, you can use add_image_size()

if (function_exists('add_theme_support')) {
	add_theme_support( 'post-thumbnails' );
	set_post_thumbnail_size( 150, 90, true ); // default thumbnail size
	add_image_size('index-thumbnail', 120, 75); // for front page thumbnails
	add_image_size('single-post-thumbnail', 300, 180); // a different thumbnail size on single post pages
}

Now, you’ve done all the hard work and can be used very simply like this:

	<?php the_post_thumbnail('index-thumbnail'); ?>

Here, you have the most control over what’s going on.

I suspect there may be one or two refinements in the pipeline, but these methods have made it much easier to handle thumbnails in themes – not least you won’t have to show users how to add custom fields manually. Good effort….