No one wants to open their web page only to see that a huge, or mis-managed, image has pushed content off to the side and completely damaged any credibility of the website to its current or potential readers. Typically this isn’t due to a lack of caring by the author. It’s usually an issue of content providers not understanding the complexities of image sizes and resolutions in relation to web design an content authoring.

This problem came to me during a recent project where my client was posting images and content on a daily basis. I needed a way to constrain the pixel size of images that were being uploading to the server and into articles. I found myself spending a great deal of time re-editing and re-inserting images that were being published way too large. It became a tedious problem after a while and I needed a solution that would benefit me and still give my client the comfort of knowing he wasn’t damaging his own website.

The Easy Way Out

Okay, so there is a simple CSS trick ( img { max-width: 500px; } ) that you can use to fix this problem. Using CSS width limits on “img” html tags will constrain the maximum width an image is displayed in the browser. However, this approach is a little funky and the image isn’t actually optimized at the specified width. It’s only scaled down, or “squeezed” by the browser, so it’s still not an ideal solution because you’re rendering an image that’s at a resolution way too large for web optimization. I needed a solution that would re-optimize the image to fit into the content space and be at a resolution that’s suitable for web publishing.

After a couple days of research I found a WordPress extention and an easy code hack that could help me get what I needed.

My Requirements

First of all, I want the maximum size of the image uploaded onto the web server to be no larger than 980 pixels in width. This is an optimal image size that will display a perfectly proportioned image when its thumbnail is clicked. A full sized picture is displayed by Lightbox that’s not larger than the width of the web page (1,010 pixels wide).

In order to achieve this I installed Resize at Upload Plus through the WordPress plugin library. This plugin was written by Daniel Mores and A. Huizingais. It lets you set the maximum size an image can be uploaded onto the web server. If the image is larger than that maximum size, the plugin resizes it to whatever size and width you specify. It’s a really sweet and simple plugin and something I would hope to see built into WordPress in future updates.

Resize at Upload Plus solves a lot for me. Now my client can upload images directly from his digital camera or computer and not have to worry about the physical pixel size of the image.

Before I had him resizing his images in Photoshop before uploading and publishing them. Now my server doesn’t take such a huge hit with the giant images that were once being uploaded onto it and I’m not having to spend valuable time to go back and correct these image size issues.

The next part of the problem could be solved natively in WordPress without needing an extension or plugin. WordPress lets content contributors insert images at four different specified sizes: “Thumbnail Size,” “Medium Size,” “Large Size,” and “Full Size.” Although the intermediate sizes of the image can be constrained, the “Full Size” image option is still going to be a problem since it allows the author to insert an image at a width up to 980 pixels.

In the “Media” section I set the “Thumbnail Size”, “Medium Size” and “Large Size” accordingly to fit the content column so that the image would not be larger than it. That was pretty easy.

Having solved that problem there was one more item left to address…

Solving the “Full Size” Problem

The next problem I was dealing with is that the “Add Image” dialog was still allowing the content author the ability to insert an image at its full size of up to 980 pixels.

I don’t want “Full Size” to be an option available to the author. It gives them the opportunity to make the mistake of selecting “Full Size” and inserting a 980 pixel wide image into an article. Which in effect would break the theme and defeat the purpose of limitations and constraints.

The easiest way to solve this is to disable the code that displays the “Full Size” option. Although considered a “hack” to the core WordPress files it solves my problem. The particular portion of code we need to disable is located in the /wp-admin/includes/media.php file on line 822.

$size_names =
	array(
 
		'thumbnail' => __('Thumbnail'),
		'medium' => __('Medium'),
		'large' => __('Large'),
		'full' => __('Full size')
 
	);

Change to:

$size_names =
	array(
 
		'thumbnail' => __('Thumbnail'),
		'medium' => __('Medium'),
		'large' => __('Large')/*,
		'full' => __('Full size')*/
 
	);

Next, save and upload the media.php file to the server, and the option to insert “Full Size” images has been removed and is no longer available to the author.

That’s it. The fix is as simple as installing an extension and a change to the core admin media.php file.

The only remaining problem with this “hack” is that if you ever update WordPress you may need to go back and comment out the “Full Size” code again. Other than that, there should be no problems for you or your client. You no longer have to sit with the thought of images breaking your theme and your client is happy with their ability to edit and contribute to their website. Win – Win situation.

Related posts:

1. WordPress Client: The Santa Fe VIP
2. More WordPress Vs. Joomla and a New Theme
3. Design, Inspiration & Education