WordPress has a pretty robust and customizable built-in image gallery system. However, when it comes to displaying each image properly on its own dedicated WordPress page, there doesn’t seem to be many comprehensive resources online to figuring out how to make that happen.
I’m hoping to shed a little bit of light on how to do just that with this article.
I was able to figure out a good image display system for my other website, the Underground Film Journal, after piecing together snippets of code from the WordPress codex and WordPress support forums.
For a WordPress image gallery, it’s a really good idea to publicly display each image on it’s own WordPress page. Why? The main reason is that this is a great way to churn out extra pageviews if visitors click on an image.
Plus, a fully developed WordPress image page display can show enough information that it can become as an invaluable resource to your site’s visitors as much as a regular article post is.
So, as an example of a good image gallery page on the Underground Film Journal, I’m going to use the link to a film still of filmmaker George Kuchar in a wedding dress running from a gorilla in the movie Thundercrack!, directed by Curt McDowell.
If you click through to look at that image, you’ll see that the actual image is displayed fairly largely on it’s own dedicated Underground Film Journal page that includes all the information you need to know about it in a Description paragraph. Here’s how I made that happen:
CREATE AN IMAGE.PHP TEMPLATE:
First off, in the WordPress template hierarchy, I created a new template called image.php. This is the template that, for our purposes, WordPress will go grab first in order to display a gallery image on its own dedicated page. (If no image.php template exists, then WordPress will default to the standard post.php template, which does a crummy job of default image display.)
An image.php template can follow any display design, but, for me, I really just wanted to make the dedicated image display pages on the Underground Film Journal look almost exactly like regular article posts. So, to accomplish that, the second thing I had to do was just copy the entire contents of the Journal’s post.php template and paste it into the image.php template.
The next steps, though, are where the real image display magic happens and this is done by making some minor modifications to the code in the image.php template.
LINK BACK TO ARTICLE:
In WordPress, when you upload an image through an article post, WordPress considers that image to be “attached” to that article. In this case, the Thundercrack! film still was uploaded to a review of the documentary It Came From Kuchar. So, what I want is that if somebody lands on the film still display page by itself, I want that visitor to have the opportunity to visit the documentary review that it’s attached to.
In this example, the link to the documentary review appears above the image and it says “More >> It Came From Kuchar.” Here is the code I used to get that link to the review to display:
<a href="<?php echo get_permalink($post->post_parent); ?>"><?php echo get_the_title($post->post_parent); ?>
To break down the above code a bit: WordPress has always been fairly big on what they consider “parent-child” connections. In the image’s case, the image is the “child” of the post “parent.” So, this code on a “child” image page is calling for its “parent,” which is why in the “get_permalink” and “get_the_title” tags, I needed to reference “$post->post_parent.”
DISPLAY FULL IMAGE:
This is the code I used to get the full, original image to display, which is pretty self-explanatory:
<?php echo wp_get_attachment_image( $post->id, "full" ); ?>
According to the WordPress codex for the tag “wp_get_attachment_image,” one needs to pull the ID # of the image to be displayed, which is what the “$post->id” part says. And the “full” describes which version of the upload image I want to display. If I wanted the “thumbnail” or “medium” or “large” version of the image to display, I would have used one of those descriptors instead.
DISPLAY DESCRIPTION:
Next, the below code might be my favorite part of the image display page. Each image can have a large “Description” attached to it that you can format just like a blog post. You can have links, bold type, italic type, lists, and even another image. Crazy!
The “Description” field of every image can be edited in the “Media Library” section of the WordPress admin area. Then, to display the “Description,” you just need to add the below code to the image.php template, which should look familiar if you’ve ever built any other kind of WordPress template:
<?php the_content('<p>Continue reading this post</p>'); ?>
I’m assuming that I don’t really need the “Continue reading this post” part of the above code since I don’t think any of my descriptions are ever going to be long enough to have to split up between two or more pages. But, it doesn’t do any harm to include it, either, so I leave it.
If you go to my Thundercrack! example page, you’ll see that I’ve linked George Kuchar’s name to his Tag page on the Underground Film Journal and I was able to italicize the movie title, which is a standard formatting thing that I do.
I just find having the ability to do this very exciting as the image display can now behave like a regular blog post and get indexed by search engines and draw extra traffic to the Journal.
IMAGE GALLERY NAVIGATION:
Lastly, you’re going to want to give visitors the ability to navigate through all the images attached to a specific post. This is the code that does that:
<p><?php previous_image_link(0,'« Previous Image ') ?> — <?php next_image_link(0,' Next Image »') ?></p>
That looks mostly like standard WordPress navigation code, like you might use on a Category Index page, but it does make specific references to images in the tags “previous_image_link” and “next_image_link.” Also, you may want to style your navigation tags differently, but those are the tags to use.
And, that’s it! Go build your own image.php templates! If you have any questions, or want to share your end result, please leave a comment below.
Or, contact me to build WordPress image gallery pages for you.
