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:

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:

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

guid); ?>

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

previous image
next image

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!

23. October 2008 by Gabe Diaz
Categories: Blog | Tags: | 4 comments

Comments (4)

  1. Hey, thanks for this. 🙂

  2. Hey Gabe,

    THIS RULES! It worked perfectly without a hitch. Thanks for posting.


    Lincoln Barbour’s last blog post..TEAR / April-May Portland Spaces

Leave a Reply to gabediaz Cancel reply

Required fields are marked *