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

For someone like myself who isn’t exactly a “qualified” programmer yet, this was a good place to start. I’m pretty much able to make my way around PHP applications and customize or edit code on my own but I do have my limitations and that was hard to realize while taking this course. I have built my own simple applications but nothing to the level of the programmers around me where I work. Taking this course helped me understand my detachment and the things I need to work on in order to improve myself to get to the level that I want to be as a PHP programmer.

Some of the things we covered were your basic syntax elements, data types, strings and how to represent your code with indentation, spacing and comments. We covered establishing variables and defining arrays along with what to do with all that data and how PHP can parse and render that data into a web application or HTML. We also covered turning basic programming principles and scripts into working functions and the process of defining functions. These are all basic elements of programming and can translate into all programming languages; not just PHP.

Our instructor, Clark Everetts, discussed best practice principles and how to go about planning and executing the process of building a web application. During the course we used a basic Black Jack web application game as an example to cover all the elements we would discuss in the class. Clark also provided us with a multitude of examples that were very useful and helped me out a lot.

The most difficult part of the course was the means in which you attend. It would seem quite convenient to attend a class over the web in the comforts of your own office or home. For my particular situation there was a lot of distractions and following along was frustrating sometimes. It’s very easy to lose you’re train of thought or wonder off into “la-la” land. There is that disconnection of not physically being in a class listening to an instructor where all your attention is on what he or she is saying. Not to mention the stern look you get when you start taking to the people around you.

To take the class you login to a WebEx conference with you, your instructor and your peers. If you have the proper equipment, you can listen to the conference/class on your computer or a telephone. WebEx does allow you to dial into conferences via a standard land line telephone. My personal setup was through my BlackBerry Storm tethered to my Motorola S9 BlueTooth headset.

Overall, I liked taking this course. It was an eye opener and helped me evaluate myself. I think there was so much information to cover that it was somewhat of a race to get everything in. At times I really felt like I was cramming for an exam. Which is understandable because (although unsaid) it is assumed that if you’re taking this course you do have some background in PHP. If you don’t I would suggest trying a different route and possibly picking up a beginners book.

My next step after taking this course is to read up on PHP and get my hands dirty with some projects of my own. I’ll be taking the PHP II: Higher Structures training course from Zend in June so by that time I hope to have a better grasp on the subject.

No related posts.