Categories

Multiple WordPress Photo Albums (Gallery) On Same Post

This post is an explanation of the reasoning behind the layout of my blog, and in particular, the post of Grand Canyon photographs.

Last week I had a discussion with one of my friends concerning my blog. I was curious about his initial experiences and his thoughts concerning the layout and content. The feedback that I got was humorous and valuable, especially considering he is a pretty good representation of the general web-surfer that may not yet be used to things like blogs and RSS feeds.

It turns out that he didn’t realize that each post on the “home” page was only an excerpt. He thought that I only had four photographs on each post and hearing his explanation, I can’t say I blame him. I’ve been running a LightBox plugin that allows the viewers to flip through all the pictures that are displayed on the loaded page. Since the “home” page displays multiple excerpts of my most recent posts, the LightBox plugin would navigate through each one, mixing posts together. This isn’t a shortcoming of the LightBox plugin that I’m using, more just an undesirable characteristic based on how I was posting my photographs.

Old Method (HTML)

In many ways, I’m very much “old school” in the sense that I had been uploading all of my pre-formatted photographs and thumbnails onto a location within “public_html” and then using HTML to display each picture in the post the way I wanted them to show up:

<a title="HDR_1973" rel="lightbox"
href="http://www.dennymet.net/photos/2010/roadtrip/grandcanyon/HDR_1973.jpg">
<img src="http://www.dennymet.net/photos/2010/roadtrip/grandcanyon/HDR_1973_thumb.jpg"
alt="" width="120" height="120" /></a>

This method worked well for me for several years and is practically guaranteed to work in any environment considering it’s just standard HTML. It allows me to quickly display a clickable thumbnail that navigates to the full-sized photograph, or in this case, opens the LightBox plugin with the full-sized photograph.

New Method (WordPress Album)

Earlier I said that the problem with using straight HTML with the LightBox plugin was because of how it treats all visible photographs as one giant album. That’s because I wasn’t utilizing the LightBox plugin in the way intended by its author. The LightBox plugin that I’m using truely shines when using WordPress photo albums.

Instead of manually uploading my photographs via FTP and displaying them using HTML, I can simply use the WordPress interface to upload my photographs to my blog, attach them to a post, group them together as an album and then insert them into my post using the gallery shortcode. That sounds like a grueling process but it’s actually pretty straightforward, and I’m going to assume that everyone already knows how to do this or can easily figure it out.

You end up getting the following (without the spaces) inserted into your post:

[ gallery ]

There are actually several options that can be added to the gallery shortcode to allow you to customize how the gallery will be displayed.

[ gallery size="thumbnail" link="file" columns="4" ]

The end result was similar to when I had utilized my previous method, four columns of thumbnails that each link to the full sized photograph. I decided to update the rest of my posts since this is how the LightBox plugin was intended to be used anyway. The only problem is that it still didn’t solve my problem of the LightBox plugin grouping all of my photographs together when on the “home” page.

Naming Albums

You can actually provide class names to your albums so that the LightBox plugin can keep photographs isolated within their own albums. When not using the LightBox plugin, WordPress will simply ignore the added option.

[ gallery class="roadtrip_grandcanyon" size="thumbnail" link="file" columns="4" ]

So long as you use a unique class name for each photo gallery, the LightBox plugin that I’m using will only shuffle through the photographs within the album that is clicked on. Problem solved!

Multiple Albums on the Same Post

After updating all of my posts again, this time with a unique class name for each post, I had an idea. I wanted to insert multiple galleries in the same WordPress post. Using my first method, I had isolated three different groups of photographs that I wanted to keep separate when viewing. The problem is that WordPress does not recognize multiple galleries per post since a photo gallery is simply the entire group of photographs attached to a post.

Rather than continue to walk through the process of trial and error, in search for a way to trick or hack WordPress, I will just provide the final solution that I came up with.

Step 1: Upload all of the photographs that you want to have displayed (just like normal). All the photographs will be mixed up at this point.

Step 2: Add the gallery shortcode for each separate gallery that you wish to have displayed in your post. Use a unique class name for each gallery. In my case I wanted three.

[ gallery size="thumbnail" link="file" class="roadtrip_grandcanyon1" columns="4" ]
[ gallery size="thumbnail" link="file" class="roadtrip_grandcanyon2" columns="4" ]
[ gallery size="thumbnail" link="file" class="roadtrip_grandcanyon3" columns="4" ]

Step 3: Identify the ID number of each of the photographs. With Opera, while editing the WordPress gallery with the built in editor, just right click on a thumbnail and click the “Inspect Element” function.

Inspect Element for ID

Step 4: Utilize the “include” or “exclude” options to the gallery shortcode to specify what photographs will be displayed in each gallery.

[ gallery size="thumbnail" link="file" class="roadtrip_grandcanyon1" include="389,390,391,392,393,394,395,396,397,398,399,400,401,402,403,404" columns="4" ]
[ gallery size="thumbnail" link="file" class="roadtrip_grandcanyon2" include="405,406,407,408,409,410,411" columns="4" ]
[ gallery size="thumbnail" link="file" class="roadtrip_grandcanyon3" include="412,413,414,415,416,417,418" columns="4" ]

Note: You may use either “include” or “exclude” in each gallery shortcode, but not both at the same time. Sometimes it’s faster to do “include” on one gallery and “exclude” on the other one.

Note: If you plan ahead with the order in which you upload your photographs, you can make editing the code much easier. Note that the ID numbers are all in order in my code. Every item that gets uploaded/created in WordPress gets it’s own unique and sequential ID number (remember, it’s running on a database).

Step 5: If you wish to show only the first few thumbnails in the except then you need to further split the first gallery again, but you may keep the same class name since it’s still the same gallery.

[ gallery size="thumbnail" link="file" class="roadtrip_grandcanyon1" include="389,390,391,392" columns="4" ]
< !--more-- >
[ gallery size="thumbnail" link="file" class="roadtrip_grandcanyon1" include="393,394,395,396,397,398,399,400,401,402,403,404" columns="4" ]
[ gallery size="thumbnail" link="file" class="roadtrip_grandcanyon2" include="405,406,407,408,409,410,411" columns="4" ]
[ gallery size="thumbnail" link="file" class="roadtrip_grandcanyon3" include="412,413,414,415,416,417,418" columns="4" ]

Note: The reason this works is because once the reader actually loads the full post, the two “roadtrip_grandcanyon1” galleries will be combined as one gallery. This is the reason that you need unique class names if you want to keep things separate, which I covered in the “Naming Albums” section.

Figuring all of this out took some time and a good deal of hair pulling, but now it’s a breeze. If you’re reading this, hopefully you found this informative and helpful. Please leave a comment if you have any questions, found this helpful or have anything you would like to add.

Share

2 comments to Multiple WordPress Photo Albums (Gallery) On Same Post