Making WordPress Images Play Nice
Last updated on March 16th, 2022 at 03:32 am.
Controlling WordPress Image Uploads Without Losing Your Mind
It seems like plain logic to organize your WordPress images in canonical folders, but…not so fast. WordPress imports files in a certain way that, as you’ll soon see, does not lend itself to order. Should we flex to the system or try bending it to our will? Perhaps, there’s no problem from the get-go? It just depends on how you choose to look at it, so let’s dive in.
Part I) I’d prefer to see ‘friendly’ URLs like example.com/img/nature/hummingbird.jpg instead of the default from WP, which reads example.com/wp-content/uploads/hummingbird.jpg I don’t want anyone to see ‘wp-content/uploads’ in my address.
Part II) The default solution leads to two variations of the same mess: Over time the website accumulates a bunch of files in a single folder, or worse you end up with a folder for each month. I just don’t publish enough content to need a folder for each month.
I’d really love to drag the files around, and WordPress would automatically replace the links in my articles. That seems really slick. Then I could create my own folder/link structure for images, without breaking my site.
WordPress Library Plugins
My first instinct suggested downloading a suitable plugin to address my media woes. Fortunately, there are four to choose from. Unfortunately, they all tease you to upgrade to the pro version before providing the solution to SEO-friendly image URLs in WordPress. Actually, most of these use virtual folders, but I did see my concern addressed by the plugin Real Media Library from devowl. I even almost committed to purchasing a license, until I could no longer use my Envato account. So, I’ll wait to say definitively if the Real Media Library plugin can move files around and make pretty.
WordPress Settings >> Media
Next, the default way that WordPress addresses this conundrum is a check box in the Settings >> Media panel which sorts uploads into year and month folders. Unchecking this box will allow one to upload everything into the same folder, great for a fresh new site, but what about down the road? If you choose the year month option, that leads to a bunch of folders like 2022/01/ through 2022/12/ for each year. At least we can get virtual folders working pretty easily. I got mine working through the responsive lightbox and gallery plugin. Unfortunately, virtual folders don’t change the real file location on the server. The files still serve from /wp-content/uploads/
Custom Upload Folder Plugin
Now here’s a nice outdated plugin that still works. You can use the free plugin to add folders behind the upload folder. That’s wp-content/uploads/img/nature/hummingbird.jpg for example. Even more unsightly. I’m going through all of this so that you don’t have to.
Update wp-config.php
I still feel undecided on whether moving the default uploads folder makes any sense. However, you can accomplish it easier than I imagined by adding the following to your wp-config.php
define( 'UPLOADS', ''.'media' );
Warning: changing your default uploads folder will break your existing image links!
Update theme functions.php
A bunch of searching leads to at least one novel approach through editing the theme functions file. In the following slick solution, uploads get shorted into folders based on the file extension. That definitely seems cool and closer to what I want. jpg, png, gif all go into the images folder, yay!
function wpse_25894_custom_upload_dir($path)
{
$extension = substr( strrchr( $_POST['name'], '.' ), 1 );
switch( $extension )
{
case 'jpg':
case 'png':
case 'gif':
$customdir = '/images';
break;
case 'mp4':
case 'm4v':
$customdir = '/videos';
break;
case 'txt':
case 'doc':
case 'pdf':
$customdir = '/documents';
break;
default:
$customdir = '';
break;
}
$path['path'] = str_replace($path['subdir'], '', $path['path']);
$path['url'] = str_replace($path['subdir'], '', $path['url']);
$path['subdir'] = $customdir;
$path['path'] .= $customdir;
$path['url'] .= $customdir;
return $path;
}
With this method, one needs to create the folder structure and make sure the folder permissions allow WordPress to write files. I used ‘media’ for my upload folder, and then ‘media/images’, ‘media/documents’, ‘media/videos’ for the subfolders. Any miscellaneous uploads go into the ‘media’ folder. If you want to try this, check out the original post on WordPress StackExchange.
Cloud Backups No Longer Elegant
I’m not sure there’s any good way around this unfriendly URL concern. While it may be possible to move and rename the uploads folder, should we? One concern is affected backups. For instance, the free version of the UpdraftPlus backup plugin, will not backup folders outside the expected structure. On the other hand, it’s easy enough to zip and download a copy of the media, except that: We will need to re-unify these archives later when we want to restore the site. This seems a little less elegant than the default WP behavior. Perhaps though, a reasonable trade-off for an organized upload folder.
Micromajor WP Image Upload Recommendations
Resize, Optimize, and Rename Files Prior to Upload
Before attempting to upload computer images to WordPress, I would resize images to 1200px for the longest size and 80% quality jpeg. Also, if you want a more descriptive filename, go ahead and rename the optimized images prior to upload.
Settle On the Upload Folder Location
It seems wise to settle on your folder location before you get too far down the road like months and years. Changing the location later will break all the links in your articles. You could repair it with a database find and replace technique, but it’s tedious and risky.
Control Thumbnail Generation Anytime
WordPress makes thumbnail generation pretty easy. You likely want to customize your thumbnail size settings in Settings >> Media. Try to keep it to two files, the original and one thumbnail size. Additionally, you may need to add a custom snippet to functions.php to further refine your thumbnail generation settings.
function remove_extra_image_sizes() {
foreach ( get_intermediate_image_sizes() as $size ) {
if ( !in_array( $size, array( 'thumbnail', 'medium','medium_large', 'large' ) ) ) {
remove_image_size( $size );
}
}
}
add_action('init', 'remove_extra_image_sizes');