Page Gallery Improvements
August 31, 2008 · Print This Article
Whoop! I’ve made some major improvements to the gallery posts on my page. WordPress v2.5 introduced an image gallery that is functional, but a lot of basic functionality is still missing. Once you click on an image, for example, you have no easy way of going back to the parent post. You can hit the Back button on your browser, but what happens if a search engine brought a visitor straight to an image page (as is happening quite often for my Samantha Sarcinella image, for example)? When you’re on that image page there’s also no way to go to the parent post and see the rest of the gallery.
So I put in a bit of work and created a sidebar that is displayed for all image attachment pages. It displays all images that are in the same gallery, and contains a link that leads back to the parent post. Most of my time went into hacking around a bug with WordPress’ attachment templates. Well, the hack itself was quick, but accepting that I can’t use attachment.php or image.php to easily customize gallery pages took a while (think you can help me? Here’s my entry in the WordPress support forum). So my gallery pages are currently generated through single.php, and a bit of code detects whether the current post has a parent post or not. If a parent exists, I’m assuming that we’re looking at an image, and the gallery sidebar is used. If not, the regular sidebar is used.
For the actual thumbnail list I can’t just use the actual gallery shortcode (since it’s no post and the parser doesn’t work). I had to write my own copy of the gallery code that populates the sidebar with images.
I’m happy with what I have now, should make it easier and more fun to browse images that I’m posting. I dug out a few more images from the Sears Point NASCAR weekend – take a look yourself! Click on any of the thumbnails! 
-
- The #2 car is getting pushed from the gas station
-
- #16 car going through inspection
-
- #20 car in garage
-
- #31 car, propped up
-
- NASCAR teams getting gas
-
- Scott Pruett
The one thing that’s still bothering me is the incorrect breadcrumb chain on the top of those image pages (Update: Now fixed!). The breadcrumbs should lead back to the blog, going through the parent post. Currently, they’re going through a category (and the category is wrong to begin with and cannot easily be changed – another bug/missing feature that I hope gets resolved soon). I’ll try to fix that one tomorrow…
I really like what you’ve done with your images in the sidebar. I’ve just started using the WordPress gallery on another site I’m putting together and it seems kinda clunky. The theme didn’t come with any image.php so I copied across the file from the classic theme. I’ve tried the text based link plugin but I’d prefer the way you have it here. Have you made the code you’ve used for this available anywhere? Also, what’s your opinion on the final image always being linked to the jpg? I think there should be no link here, why would people want to click on a jpg if it’s already on the screen?
I didn’t post specific code anywhere, but I posted some information on the WordPress forums: http://wordpress.org/support/topic/200681
Chances are that you actually came from that post, though
If you’re looking for a specific part of the code I can post it here. Gotta know what you’re interested in, though – this needs to be customized in the WordPress theme that you’re using.
The image that’s displayed on each gallery page is usually much smaller than the full-res image, so I don’t mind it linking to the big picture again. Unless I’m misunderstanding what you’re saying
It should be possible to get rid of the link in code, if that’s what you want.
Thanks for the quick response Matthias. Yes, I found your site through that page. I have a gallery at http://www.swingdancecork.com/photos/decadent-dolls/ which needs tidying up as the classic image.php doesn’t suit straight away but before investing the time I thought I’d take a look around. I would just like to see how you put the gallery in the sidebar.
On the image link, I tend to post quite small images when I’m hosting them myself as opposed to on Flickr etc. I must have a root around to see how I can remove that.
I’ll dig up the code when I’m home tonight, currently I’m at work
Great, thanks! It’s late in the day over this side of the world so I’ll check back tomorrow evening.
This is the code. I can’t take credit for it, it’s the WordPress gallery code with some modifications to make it work outside the loop and outside a post. A few comments added to explain what’s going on. I put this in an extra text file to keep the formatting and to prevent the browsers from misinterpreting the HTML code that’s inside the code snippet.
Here it is.
All in all it’s pretty straightforward. A couple of redundancies left over that we don’t really need here, but it works!
Thanks for that. I’ll have to figure it out over the weekend, including how to modify for putting gallery on pages rather than posts. I tend not to modify WordPress code too much but my day job is programming (not web though) so how hard can jt be… !
Thanks again.
Hi again Mathias. Where exactly do you put this code? I’ve tried sidebar.php and single.php where my second sidebar (on the right) gets called. sidebar.php really didn’t like it but single.php didn’t make any difference.
Thanks for any help you can give me on this!
I made a couple of changes to the code snippet, the $id variable was used twice in a bad way, and broke the $linkback code. But this code snippet should definitely work, I added it at the bottom of single.php and you can see it if you click at any of the images above again. It’s updated under the same link – I had to hit refresh because the old version was stuck in the browser cache.
You have to keep in mind, of course, that the code is looking for the post_id of the parent post. If no parent post exists, nothing is executed. That’s how I ensure that the gallery code is only executed when we’re on a attachment page (it’s a hacky workaround because the image.php and attachment.php templates are broken in WordPress).
If you’re wanting to use the code elsewhere, you need to retrieve the ID differently, depending on what you want to do.
Thanks Matthias. It seems that I have to update attachment.php rather than single.php. I’m getting the thumbnails on the screen but I have to mess with the flow of the divs to try and get it into the sidebar. I’m getting there but it’s slow!
Seems like I’ve managed to get the thumbnails into the sidebar but I’m waiting on an imminent release of the next version of the theme I’m using as there’s an issue with images getting pushed down the sidebar.
Next I’m going to try and modify your code on a photoblog (pana-vision.org) I have to show the recent photos relative to the current photo on display. I currently use rss feed but this will always just show the most recent photos.
All the best,
Donal.
[...] allowing me to write entire posts at the pool in Maui, by way of the iPhone application); creating galleries and video posts is fully automated and fun; and I learned a ton about PHP and CSS in the process of [...]