Introduction

The site this is used for has folderish content types that can contain multiple images, for which the users requested a simple method for sorting. 

First Attempt

Initially, I simply customized folder_contents to additionally display an icon of the image, and make use of the existing Ajax-based drag and drop reordering.  This fell short in that the icons were too small to be able to accurately distinguish one from the other.

Second Attempt

Next, I further customized folder_contents using the thumbnail view and also providing links to larger views that would be displayed in a dialog box. This solution has the drawback that the drag and drop functionality is only usable when all the images fit in the window.  When a folder contains more than 5-6 images, the user would have to drag and drop an image as far as is viewable, then stop, scroll the window further and repeat the drag and drop process.  When moving an image from the bottom to the top of a list of 30, this quickly became unusable. 

Aside: Although this template is not used primarily for sorting, it is used for edting (renaming, rotating) multiple images at once.

Final Solution

The ultimate solution would resemble iPhoto's sorting capabilities, in that all the images would be displayed in a table-like view, such that each data cell would contain an image, which could be re-ordered by dragging to any position in the grid.  This requires a new page template that positions the images with css rather than a table, and a modified version of the dragdropreorder.js used by folder_contents.  I also added the ability to double-click on an image to view the full-size version in a dialog box.