Using WordPress Galleries to Store Post Image Meta Data

One of the neat features in WordPress is that an end user can so easily attach meta data to a post.

For example, I might want to make some posts only viewable if a user is subscribed to the blog. I can fairly easily tweak the theme to show users a message if they aren't logged in. I can then instruct the owner of the blog to use a custom field (the layman's term for meta data) named visibility with either the value free or subscription. The result: I've managed to add sophisticated functionality, and the dashboard of WordPress more or less automatically supports it.

One area where I've seen this meta data approach break down is in the world of graphics. The classic example being a thumbnail image that goes with your post and is shown on the home page. I've seen this handled using the meta data feature above, where the user is instructed to set the name of custom field to thumbnail and the value to an uploaded file name, such as music.jpg.

The problem with this approach is two fold: (1) end users need to know how to use FTP well enough to put the image in place on the server. And (2) depending on a file name is quite fragile - what if the user isn't consistent about case or doesn't include a space. It works, but unlike the meta data solution above, it's just not smooth.

A Better Image Meta Data Solution

I recently learned about an existing WordPress feature which helps out with the above problem. That is, galleries. Every post gets it's own gallery (which, I think isn't a great name, but it'll do), which represents images associated with the post. What's interesting is that images in the gallery don't have to appear in the article. In fact, when you upload an image in WordPress, there's a specific Insert into post button you need to hit. If you don't hit this button, the image is in the gallery, but not actually shown to the user. I'm sure this is a bit confusing, but again, it seems reasonable.

It turns out that you can trivially use these images in the gallery as meta data. I'm sure there's a variety of ways to do this, though I found the most straightforward way was to make the image name the meta data key. To implement the thumbnail meta data I discussed above, you instruct users:

1. On the post editor's toolbar, next to Update/Insert click on the Add Button image.
2. Upload the file as you normally would
3. For the Title attribute, enter thumbnail
4. Do NOT click Insert Into Post. Just hit Save All, and close the dialog box.

The user is now done. The image is in the post's gallery and ready to be picked up by the theme.

The theme can then leverage a function like get_post_thumbnail below. You'll see that it queries for child posts associated with a particular post's ID. This is where the gallery is stored. It then iterates through every child and looks for the one named thumbnail. When it finds it, it returns back the URL to the image.

function get_post_thumbnail($post_id) {
  $found = get_children(array('post_type' => 'attachment',
                              'post_mime_type' => 'image',
                              'post_parent' => $post_id));
  if(!$found) {
    return false;
  }
  foreach($found as $p) {
    if(strtolower($p->post_title) == 'thumbnail') {
      return wp_get_attachment_url($p->ID);
    }
  }
  return false;
}

The above function can be used anywhere in your theme you have a post ID.

There's no reason to link the above technique to images alone. Any media, perhaps a voice over or video, could be used as meta data just as easily. I love it when WordPress offers these flexible, yet easy to use features that make both the programmer and end user's life easier.