Create Photo Gallery with WordPress Categories

Create Photo Gallery with WordPress Categories

I was pleasantly surprised how easy it was to modify my wordpress category template to display thumbnail images of each cake in a gallery format. Combining this with my highslide plugin provides a simple and easy to maintain gallery.

Steps:

1. I set up a custom key field for each post. I named the key ‘thumbnail’ and the value was set to the filename of the posts thumbnail image. So for example if I had a wedding cake post with an image called cake253.jpg, I also would create a thumbnail called cake253-circle.jpg. I then added cake253-circle.jpg as the value for the thumbnail. Note: I’m sure there are cleaner ways to do this, but I started these naming conventions long before I created the gallery.

2. I then created a category.php file for my theme which looped through each post and extracted the thumbnail value:

        <div id="content" class="widecolumn">
                <?php $counter=0;
                if (have_posts()) : ?>
                        <?php while (have_posts()) : the_post();
                                global $post;
                                $counter++;
                                //Get Thumbnail
                                $post_thumbnail = get_post_meta($post->ID, ‘thumbnail’, $single = true);
                        endwhile; ?>
                        <?php

                <?php endif; ?>
        </div>
<?php } //end else
 

3. Next I made sure all my large images that will be displayed when the user clicks on the thumbnail were prefixed with big. So for example, if the image in my post was cake253.jpg, I made sure to create a larger image called big-cake253.jpg.

4. I then added code to figure out the name of the large image to display:

        <div id="content" class="widecolumn">
                <?php $counter=0;
                if (have_posts()) : ?>
                        <?php while (have_posts()) : the_post();
                                global $post;
                                $counter++;
                                //Get Thumbnail
                                $post_thumbnail = get_post_meta($post->ID, ‘thumbnail’, $single = true);
//Remove -circle from the thumbnail image file name.  The big prefix will
//be added later
$post_largeImage = str_replace(‘-circle’, , $post_thumbnail);
                        endwhile; ?>
                        <?php
                <?php endif; ?>
        </div>
<?php } //end else
 

5. And finally I necessary highslide code to allow users to click on the thumbnails and expand to the larger image:

                <?php while (have_posts()) : the_post();
                                global $post;
                                $counter++;
                                //Get Thumbnail
                                $post_thumbnail = get_post_meta($post->ID, ‘thumbnail’, $single = true);
                                //Remove -circle from the thumbnail image file name.  The big prefix will
                                //be added later
                                $post_largeImage = str_replace(‘-circle’, , $post_thumbnail);
                                //*** Highslide Code Starts ***
                                //Notice rel link has the link to the file that will be displayed when the user clicks on the thumbnail
                                //I used other properties of the $post variable to display a link back to the original post and
                                //also to display an excerpt of the post
                                        <div class="thumbnail">
                                                <a href="<?php the_permalink() ?>" rel="_slash_images_slash_big-<?php echo $post_largeImage; ?>" class="highslide"  onclick="return hs.expand(this)">
                                                <img style="border:none;margin:0pt 10px 10px 0pt" src="http://www.pinkcakebox.com/images/<?php echo $post_thumbnail ?>" alt="<?php the_title() ?>" border="0" id="<?php echo $post->ID ?>" title="Click to expand image" /></a>
                                                <div class=‘highslide-caption’ id=‘caption-for-<?php echo $post->ID ?>’>
                                                                <a href="javascript:hs.closeId(‘<?php echo $post->ID ?>’)" class="highslide-close">Close</a>  
                                                                <?php echo substr(get_the_excerpt(true),0,50)?>
                                                                <a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>" style="font-size:.8em">Read More</a>                                         
                                                </div> 
                                        </div>
                                //*** Highslide Code Ends ***
                                // Counter to start new row of thumbnail images once 6 are displayed in arow
                                        <?php if (($counter % 6)==0)  { ?>
                                                <br class="clearboth">
                                <?php
                                      } //End of clearboth
                        endwhile; ?>
                        <div class="clearboth"></div>
                       
                        <?php //Page Navigation Requires PAGEBAR plugin
                        wp_pagebar(array(‘before’=>‘<b>More Cakes: </b>’))?>   
                <?php endif; ?>
        </div>
<?php } //end else
 

You can see examples of the gallery in our wedding cake gallery, novelty cake gallery, or children’s cake gallery.

2 Comments

  1. I’m sort of a newbie at this PHP coding, so I wonder if you can answer a question for me..
    I would like to use the above code, to do exactly the same as you, to display a form of gallery for my genealogy site using the thumbnails and large images I have in my WordPress upload directories.
    I’m getting a little confused between the 3 snippits of code above though.

    It looks like although you repeat some code in each window, and some PHP lines are added to in a subsequent window, basically the 2nd snippit fits in the 1st group of code, and the 3rd snippit fits into the 2nd with Window 3 actually containing all the merged code that I need except for the following lines from window 1:

    If I am wrong, is there any way you might email me the correct code listing, as after pasting these 3 groups together, I’m still not sure if I pasted them correctly.
    Thanks in advance.
    Martin

Leave a Reply

Your email address will not be published. Required fields are marked *