Adding a Gallery to WordPress Using Timthumb.

In this tutorial i teach you a pretty, pretty, pretty, pretty easy way to display all the photos attached to a post in a gallery.

In last week’s tutorial I showed you how to embed uploaded videos into your blog posts. Following on from that, this week I’m going to explain how to add an image gallery. To do this tutorial I’m going to assume you know a little bit about making WordPress themes. You can see I’ve implemented the gallery in this post already.

1. Set up the post.

The first thing we want to do is set up a gallery post in the WordPress admin panel. Log into it and create a new category called “gallery”. Then go and add a new post. Click the upload button and select a few pictures to upload and attach to the post. Don’t insert them into the body! Now, we have a post with attached images ready to be displayed.

2. Timthumb.

Now we want to get the Timthumb script. You can download it from here and save it into your themes folder. Also in the themes folder, create a new folder called cache and set its permissions to read all and write all execute none (666). What the Timthumb script does is take in an image url and the size passed as parameters and returns the cropped image. It also creates a cached version of the image so the script doesn’t have to run every time the page is loaded.

3. Implement the script.

Open up the single .php page in your text editor and paste the following code inside your “the_loop” function:

<?php if(in_category('gallery')){ ?>
    <?php $images =& get_children( 'post_type=attachment&post_mime_type=image&post_parent=' .$post->ID );
    if(!empty($images)){
        foreach( $images as $imageID => $imagePost ){
            $url = wp_get_attachment_image_src($imageID, 'large');?>
            <a title="<?php echo $imagePost->post_title; ?>" href="<?php echo $url[0]; ?>"><img src="<?php bloginfo('stylesheet_directory'); ?>/timthumb.php?src=<?php echo $url[0]; ?>&amp;h=156&amp;w=156&amp;zc=1" alt="Screenshot" border="0"/></a>
    <?php } } ?>
<?php } ?>

You can paste the code anywhere inside the_loop and it will work. What its doing first is checking to see if the current post is in the gallery category. That means it will only execute the code for gallery posts. It then checks to see if there are any images attached to the post. If it finds images it passes the url of each to the Timthumb script for processing. You can see that the src in the image tag looks like to following:

<img src="<?php bloginfo('stylesheet_directory'); ?>/timthumb.php?src=<?php echo $url[0]; ?>&amp;h=156&amp;w=156&amp;zc=1" alt="Screenshot" border="0"/>

Instead of an image url it contains the url to Timthumb. It then passes the image url and the desired width and height as GET parameters. The zc parameter is zoom/crop. What zoom/crop does is chops part of the image off to make sure it fits the desired size without changing the ratio.

And that’s it! To keep it as simple as possible I didn’t add any style tags to the sample code so make sure and style those images up good. This version is pretty easily implemented but when each image is clicked it takes you to a new page. You can now check out how to display these images in a nice overlayed gallery using jQuery and jQuery tools right here.

Tags: embed/gallery/image gallery/Timthumb/Wordpress
Posted in Blog, gallery by Abban |