Fixing Your Image Gallery for WordPress

Most new themes will include the proper image.php file for the WordPress 2.5+ gallery but if not here are a few quick snippets of code that may help.

When using the gallery features with WordPress 2.5+ you are able to upload many photos to a post/page and then insert the entire gallery using the shortcode:

[gallery]

When viewing individual images WordPress will automatically look for a image.php, then an attachment.php following the WordPress Template Heiarchy. If your theme doesn’t have either just copy your single.php or index.php and rename it to image.php or attachment.php

Don’t forget to start of your new page with the proper label:

<?php
/*
Template Name: attachment
*/
?>

In the content area of you page, IE post, content, post entry…you can use the following to call in the image:

<p class="<?php echo $classname; ?>"><?php echo $attachment_link; ?>
<br /><?php echo basename($post->guid); ?></p>

For a snazzy before and after image preview under your image you can use:

<div class="imgnav">
<div class="imgleft">previous image<br /><?php previous_image_link() ?></div>
<div class="imgright">next image<br /><?php next_image_link() ?></div>
</div>
<br clear="all" />

Style it with some CSS:

/****************Image Gallery *********************/
.gallery {text-align:center;}
.gallery img {padding:2px; height:100px; width:100px;}
.gallery a:hover {background-color:#ffffff;}
.attachment {text-align:center;}
.attachment img { padding:2px; border:1px solid #999999;}
.attachment a:hover {background-color:#FFFFFF;}
.imgnav {text-align:center;}
.imgleft {float:left;}
.imgleft a:hover {background-color:#FFFFFF;}
.imgleft img{ padding:2px; border:1px solid #999999; height:100px; width:100px;}
.imgright {float:right;}
.imgright a:hover {background-color:#FFFFFF;}
.imgright img{ padding:2px; border:1px solid #999999; height:100px; width:100px;}

I know I took the above CSS from somewhere so please let me know if it’s yours to provide credit. What the above will do is fix the spacing issue between the default WordPress image gallery along with add some style and function to your single image page.

This code has help me before and now I just about copy and paste it through any WordPress install I have running, so hopefully it will help some of you as well!