WordPress: Provide a Better Naming Convention for Thumbnails

We never really brought the WordPress thumbnail feature to its full potential until recently. Initially, we assumed that WordPress provided a codex tag that would allow for the easy insertion of a thumbnail image, keeping it separate from the full-size image, something such as wp_thumbnail would have been perfect. What we discovered was that WordPress has no such tag or simple naming convention set for the use of thumbnails. This isn’t to say WordPress hasn’t thought about this at all.

What WordPress does provide are a few options for basic thumbnail insertion. The first option is to simply add a link to the thumbnail image ( http://www.mysite.com/wp-content/uploads/myImage-125×125.jpg ). The second option is to utilize a WordPress / Flutter Custom Field with the thumbnail file name followed by the dimensions provided under Settings > Media. WordPress 2.7 + uses the thumbnail format “myImage-125×230.jpg” assuming the image sizes never change, we could set up this Custom Field for the file name only: ( myImage ) though if the images ever change size, this could be a small disaster. The third option is to use a plugin such as Flexible Upload to adjust the thumbnail sizes on-the-fly. Unfortunately, Flexible Upload is only compatible up to WordPress 2.5.

But why go through all of this trouble when WordPress auto generates a thumbnail for us? Shouldn’t we be able to include a simple line of code to insert the thumbnail with such ease that if I change the thumbnail dimensions I won’t need to alter the file names a second time? What happens when WordPress changes the naming convention back to “myImage-thumbnail.jpg” and we have a thousand Custom Fields using the latest dimensional convention?

If WordPress would implement an option that would allow the user to choose their own naming convention, this wouldn’t be a problem. We really didn’t have time to wait for WordPress so we hacked the core and designed our own thumbnail prefix. This allows us to avoid the need for text-editor inserted images, Custom Fields and random plugins.

By creating a prefix to the file name as opposed to the suffix that WordPress provides, we open the door for thumbnails to be free of their bonds. The typical “myImage-125×230.jpg” becomes “thumbnail-myImage.jpg”. Now we can keep all thumbnail images grouped in the uploads folder and use the original, full-size image Custom Field to insert the thumbnail into the post. What we get is a two-for-one Custom Field.

Using only a single Custom Field in the post area we can call on the full-size image with the following:

<img src="<?php bloginfo('url'); ?>/wp-content/uploads/<?php echo get_post_meta($post->ID, 'full-image', $single=true) ?>">

and calling on the thumbnail only requires a small modification to this code:

<img src="php bloginfo('url'); ?>/wp-content/uploads/thumbnail-php echo get_post_meta($post->ID, 'full-image', $single=true) ?>">

Note the inclusion of “thumbnail-” as a prefix allowing us the control we need to access the file.

In order to set this up, a few minor adjustments to the core file “media.php” is required. The “media.php” file is located in the wp-includes folder. This hack is directed toward users of WordPress 2.7 + so it may be necessary to locate these lines through a search feature. The first adjustment is located on line 358:

if ( !$suffix )
$suffix = "{$dst_w}x{$dst_h}";

Replace {$dst_w}x{$dst_h} ( the instructions telling WordPress to name the the thumbnail file with the dimensions provided under Settings > Media ) with whatever prefix is desired. We chose “thumbnail-” for simplicities sake. The result is below:

if ( !$suffix )
$suffix = "thumbnail";

Next it is important to remember this is still a suffix which means WordPress is using it at the end of the file name. We want to create a prefix to appear before the file name. This is achieved by altering the two additional lines of code.

alter: $destfilename = "{$dir}/{$name}-{$suffix}.{$ext}";
to: $destfilename = "{$dir}/{$suffix}-{$name}.{$ext}";

alter: $destfilename = "{$dir}/{$name}-{$suffix}.jpg";
to: $destfilename = "{$dir}/{$suffix}-{$name}.jpg";

All that was done here was moving the {$suffix} to the front of the file name {$name}, essentially making it a prefix. While technically we left the code named “suffix”, it has become a prefix because of it’s new location. All that is left is to save the file, upload it to wp-includes and you’re ready to enter a new world of thumbnail freedom, providing a much easier way to keep WordPress in check.

Please remember that this is not a plugin therefore, when upgrading, this core hack must be performed again.