Creating Photo Galleries in WordPress

Sometime ago I set out to create a photo gallery with WordPress where I could upload photos, comment on them and link between without the use of any plugins. This post is a step by step guide of how you too can add this functionality to your blog.

The galleries consist of 2 different parts:

• The gallery entries created with WordPress
• The templates used to display gallery posts

Creating Galleries

From within WordPress we need to not only create a gallery but also differentiate gallery posts from regular posts. Categories work great and I named mine ‘Photos’. After you have made a new category, we’ll create our first gallery posting.

In WordPress create a new post. Give it an appropriate name and then add images to your gallery using the ‘Add an Image’ button. After your files have been uploaded, right click on the image you want to use for a thumbnail and select ‘Copy Image Location’ to copy the full URL to the thumbnail size photo. When you are happy with your thumbnail, choose ‘Save All Changes’ to attach the files to the current post and then select the ‘Insert Gallery’ button that will appear to tell WordPress to display all of the attached images as a gallery whenever a reader views your post. When you select ‘Insert Gallery’ WordPress will automatically insert the gallery shortcode into the body of the post. By inserting the gallery into the actual post body, no additional work is needed to display and link to each picture in the gallery from the single post view within your templates. WordPress uses the shortcode I mentioned to handle all of that for you.

With your images successfully added to the post, return to the edit page and scroll down to the ‘Custom Fields’ box. Now if you don’t know what custom fields are, don’t feel bad – I didn’t know what they were either. Basically, custom fields allow you add unique meta data to your posts that you can grab and use within your templates. We’re going to use a custom field for our thumbnail. In the ‘Custom Fields’ pane enter a name – thumbnail works – and then paste in the link you copied during your photo upload. If you’ve lost that link you can always get it back by going to the ‘Media’ page and performing the same action that you did before. With your thumbnail added click ‘Add Custom Field’ to save the change. Nice work, your gallery is now created. Make sure to set its category to ‘Photos’ or whatever you chose and then save a draft so we can return to the post later.

For my galleries I also chose to create a second custom field and used it as a description for the entire gallery but this step is optional.

Creating The Template Files

My galleries each have 3 different and unique views. The preview (on my homepage) the gallery view (that shows thumbnails of all photos in a gallery) and finally there is the large single image view.

Starting with the gallery preview page, we’ll need a way to tell which posts in The Loop are photo galleries and which ones are not. Inside of your theme’s ‘index.php’ file, add the following:

<?php while (have_posts()) : the_post(); ?>
	<?php if(in_category('Photos'))
	{
		//Markup for gallery posts go here
	}
	else
	{
		//Markup for other posts go here
	}
	?>
<?php endwhile; ?>

Your implementation of the code above may vary depending on your theme, but basically what were trying to accomplish is a differentiation between posts in the category ‘Photos’ and posts in any other categories. The differentiation is achieved by using the in_category() template tag.

Now that we have separated our gallery posts from the herd we can create the HTML used to display them and we can pull in the thumbnail we created (and will create for each post) as well. To add the thumbnail to the display, use the following inside of the if statement above.

<?php echo get_post_meta($post->ID, 'thumbnail', true); ?>

To read full usage information for the line above see the get_post_meta() page. Essentially we’re asking for the piece of meta data that was filed under ‘thumbnail’ for the current post. The same logic is also applied for retrieving the description.

The last piece of our puzzle is in the form of the ‘image.php’ file. Under the Wordpress template hierarchy, WordPress tries to open all attachments based on their MIME type. Since we’re dealing with images, we’ll want to create or edit (depending on your theme) an ‘image.php’ file. If you are creating the template, I recommend opening up the version that comes with the WordPress default theme and using that as your starting point.

Inside of your ‘image.php’ template you will need to include the following:

<?php echo wp_get_attachment_image( $post->ID, 'large' ); ?>

The above line of code is used to pull in the image. The first parameter is a reference to the current image and the second is a reference to the display size you want to use.

Optionally you can also use the following to grab next and previous thumbnails:

<?php previous_image_link(); ?>
<?php next_image_link(); ?>

The code below shows things in the proper context.

<?php if (have_posts()) : ?>

	<?php while (have_posts()) : the_post(); ?>

		<div class="entry">

			<?php echo wp_get_attachment_image( $post->ID, 'large' ); ?>

			<div class="navigation">  

				 <?php previous_image_link(); ?>
				<?php next_image_link(); ?>

			</div>
     		</div>

		<?php comments_template(); ?>  

	<?php endwhile; ?>
<?php else: ?>

	<p>Sorry, no attachments matched your criteria.</p>

<?php endif; ?>

You’ll notice above that I have included a standard loop in the template. Doing so allows us to access the $post->ID variable to retrieve the image. This works because inside of ‘image.php’ WordPress treats your image as if it were its own post. That is important to note because we can also make use of standard template tags like the_title() to grab image specific information. Once you’ve managed to pull the large image into the page, you’re finished with the technical side. From there you can create HTML and CSS to dress up the templates.

Congrats! You’ve just added image galleries to your WordPress blog!

Odds are you won’t be able to copy the code above line for line, but hopefully I’ve explained the crucial pieces so you can easily apply them to your existing templates. If you see areas that are incorrect or could use improvements, please leave a comment and will do my best to clarify things.

Finally I would also like to thank both Blackbox Technologies and Kristarella for their awesome posts that helped me get my galleries to where I wanted them.

Thanks!

Sharing is Caring