Ordered Thumbnails

Display a thumbnail based on post images with no additional uploads. For multiple image posts, thumbnail respects Gallery sort order.

Click here to download Ordered Thumbnails.

Description

Ordered Thumbnails is a WordPress plugin that allows you to display thumbnails based on images that have been attached to a post. This plugin also allows you to specify which thumbnail appears next to a post with multiple images by ordering the thumbnails in the Gallery tab of the WordPress “Add Images” lightbox and placing the thumbnail desired in the first position.

To style how the thumbnail appears on your page, you may pass optional CSS class names to the plugin, which will then be applied to the `<img>` tag returned. Alternately, by setting the display parameter to “false”, Ordered Thumbnails will return the thumbnail URL, height, and width as a PHP array to be used however you see fit. If no images have been attached to a post, the plugin fails gracefully and returns “false”. This plugin will work anywhere the WordPress posts loop is used and works particularly nice in combination with `the_excerpt` for archive pages.

Installation

  1. Upload `ordered-thumbnails.php` to the `/wp-content/plugins/` directory.
  2. Activate Ordered Thumbnails through the “Plugins” menu in WordPress.
  3. Place `<?php ordered_thumbnails(); ?>` in your templates within the WordPress post loop.

The plugin takes two optional parameters:

By default, `<?php ordered_thumbnails(); ?>` behaves exactly like `<?php ordered_thumbnails( ‘true’, ” ); ?>`. Change the 1st parameter to “false” if you want the plugin to return the thumbnail data as an array, rather than display an `<img>` for the thumbnail. The 2nd parameter accepts CSS class names you would like to assign to the thumbnail `<img>` (only used if param. 1 is “true”). All options will return “false” if no image is attached to the post.

For posts with more than one image attached, you can pick which thumbnail you want to use by ordering the image in the post’s gallery. While editing a post, click the “Add an image” button and then click the “Gallery” tab in the lightbox. Re-order your images by dragging the image thumbnail you want to appear for the post to the top of the order. You may also change the order number to “1”. Click “Save all changes”. See the Screenshots for a visual guide on how to do this. Note that this will NOT reorder images in the actual post.

Using the plugin with `the_excerpt` in your `archive.php` template works nicely to show thumbnails next to your archived posts.

Frequently Asked Questions

Why can’t I change which thumbnail is used?

While the plugin will show thumbnails and will not break in WordPress 2.5, the ability to order the Gallery images was not added until 2.6.

Will this plugin work for images not uploaded through WordPress?

Short answer: no. This plugin relies on the way images are attached to a particular post when they are uploaded through WordPress. Images hotlinked from other sites (or even linked to a place on your own server not controlled by WordPress) are not tied to the post as attachments in the WordPress database.

Some of my images are just image links, some are uploaded through WordPress. Will this plugin break on my site?

No, but the plugin will only show thumbnails for images uploaded through WordPress. For posts with no WordPress uploaded images, no thumbnail will appear.

How does Ordered Thumbnails work?

This plugin works by first looking for any attachments in the wp_posts database table that have a “post_parent” ID that matches the current post and as a second step for posts with multiple image attachments, returning the attachment with its “menu_order” field set to “1”. If no image attachments match the current post ID, the plugin returns “false”.

Screenshots

To change which thumbnail is used for a post with multiple images, click the "Add an Image" icon in the post edit screen.

To change which thumbnail is used for a post with multiple images, click the "Add an Image" icon in the post edit screen.

Click the "Gallery" tab and then drag the image thumbnail you want to appear for the post to the top of the order. You may also change the order number to "1". Then click "Save all changes".

Click the "Gallery" tab and then drag the image thumbnail you want to appear for the post to the top of the order. You may also change the order number to "1". Then click "Save all changes".

Changelog

1.0 Initial release version.

14 Comments:

  1. Thank you so much for this plug-in. I can’t tell you the number of times I’ve wished for something like this since we started the website. It’s been very frustrating trying to do this with what the default was. Excellent plug-in. Thanks again!

  2. I’m glad you like it! Thanks for kind words.

  3. Hi! I’ve been looking for something like this for some time now. Could you describe a bit about the inner workings of your plugin. Maybe in the faq section?

    Thanks. Keep up the good work!

  4. The only thing I would change is to give us the option to have to show or not. I’ve got a couple of posts where I just want to show one picture full sized. I have it full-sized, but the thumbnail is showing as well.

  5. @Eero: I’ve updated the FAQ section to include a short description of how the plugin actually works on a code level. If you’re interested in learning more about how it works, I suggest downloading the plugin and viewing the code—the code is fairly straightforward and contains inline comments.

    I’m glad you like my plugin!

    @BigAl: The plugin is designed to work well with “the_excerpt()” which does not include images from the post by default. Perhaps adding a check box to the post edit screen that says whether or not to show the thumbnail could be something for a later version.

  6. Hi. Just installed the plugin. After I upload my photos I click ‘save all changes’, I get the second screen shot like you have above but no information in it below the gray line. I also do not have the ‘gallery’ tab.
    The images are showing up in the media library.
    I had another plugin that I was using. It started giving me this trouble (possibly after I upgrade WP). so I installed your plugin and I’m having the same issue.
    Any help would be appreciated. I’m a bit of a novice.

  7. @Ron: I checked your site and you’re running WP 2.8, so the plugin should work for you. Did you upload the photos via the Media Library or the Edit Post screen? If you add the images via the Media Library, WordPress does not associate them with any posts unless you insert them into the actual post. The plugin generally works when you add images via the Edit Post > Add Images screen. Let me know if that fixes the problem (or not).

  8. Thanks for the reply Stephen. I am adding the images in the way you mention and still no luck. I tried installing another plugin and still no gallery tab is showing up (or anything for that matter under the gray bar). Maybe I have some other plugin causing a conflict. I know when I had the WP Auto. Upgrade plugin activated it caused problems. I’ll keep fooling around and see what I can come up with.

  9. @Ron: No luck is right; you seem to be doing everything correctly and your WP install is up to date so it should be working.

    My suggestion would be deactivate all of your plugins and make sure the gallery view is available on a post with two or more images. Then re-activate your plugins one by one while checking to see if the gallery tab goes away each time.

    Please let me know how it goes and if Ordered Thumbnails begins working for you.

  10. actived this plugin
    but nothing happened on the content page nor the image upload page

  11. @FanZy: Please see the installation instructions and the FAQ’s in the post above. You need to edit your theme’s template files before anything will happen.

  12. I hope to see the checkbox in a future release. Other than that, this is one of my top 3 favorite plug-ins for WP. Thanks again.

  13. There’s no Gallery tab in the “Add Images” lightbox. I use version 2.8. Does it require an additional plug-in?

  14. I found out that I need to upload several pictures in one post for that tab to appear.
    http://wordpress.tv/2009/01/05/creating-an-image-gallery/

Leave a Reply