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

In my friend Victor’s vision, The Santa Fe VIP was set out to be an end-all be-all resource for everything related to Santa Fe and in particular, it’s nightlife. After a little deliberating and getting an understanding for his project I had him focus the scope of his website on nightlife and highlight various businesses in town on a more concentrated scale.

Instead of being “all inclusive” I suggested he make exclusivity his selling point. My idea to him was, “What would make a persons night in Santa Fe a VIP experience?” People want to know about the deals in town. They want to feel like they’re getting the hook up or they’re part of “the crew”. If anyone has ever been to a night club that had a cover charge and known the bouncer well enough to get a deal at the door, that’s a “VIP Experience” and was going to be our model.

So far, it’s working, and because of Victor’s range of friends and connections in the restaurant and night club industry he’s been able to lock in some great deals and pass them on to readers of the website. He’s locked in a following and people appreciate the service.

My Role…

My role was simply to build and maintain the website and to help Victor get an understanding of publishing web content through a Content Management System; WordPress in this instance. The website went through a slew of design changes while Victor and I deliberated over how he could manage and maintain content as well as sell the site to potential customers with ad space and exclusively offered customized web pages.

Requirements

Victor initially didn’t express many requirements or things that were a MUST HAVE which gave me complete control over the creative process. He expressed to me his idea and I simply translated that into a functional web design. Some things that he did like were rotating and dynamic content; “flashy” stuff. I had a few ideas and a couple things that I hadn’t really tried or used before. For one, this is a website that is about entertainment so it should have some entertaining value to it. This means content that changes and isn’t stale. A lot of my clients want their information out but aren’t necessarily looking for any entertaining value in their content. Victor, on the other hand was.

In order to achieve what Victor wanted I used a jquery rotating banner on the home page. This would serve as two functions: ad space for exclusive customers or content and it has an wow factor. It’s dynamic content; It’s “Flashy”.

The Logo

When creating the logo we had a lot of different opinions. I had my own vision of what I thought it should look like and so did Victor. So to remedy that issue I had him send me examples of what he liked; font’s etc. He directed me to the website of Cody Sanderson. Cody is an amazing local Native American Jeweler and Victor liked the font on his website banner. After about two days of trying to find the font that Cody used I realized it was most likely a custom font and I’d save time just making it myself. Using Trajan Normal as a template I was able to add the exaggerated columns, ornate swirls and pronounced swooshes. What transpired from that was a pretty cool font and a great logo.

Results?

So far the website has been very successful and we’ve garnished a lot of attention from different resources namely Facebook and Twitter. I’ve always been a very big advocate for Social Networking. Not as a cool toy or a way to meet with old friends and reach out to social interests, but as a way to reach out to a large audience to gain interest in your content. More specifically in this case: Santa Fe locals and tourists were the target audience and both Facebook and Twitter offered a great way to reach out to that audience.

The site is growing everyday. Throughout the last month (even before announcing a launch) the website has had approximately 7,000 hits. Victor himself has managed to sell some of his newly found web-based real estate and produce some valuable content. Although we’ve experienced a few bumps with media content, Victor has grown comfortable in publishing regular blogs and events with pictures and links.

Related Posts

1. Design, Inspiration & Education
2. Controlling Image Sizes In WordPress
3. WordPress Client: SouthWest Spray Foam

The differences between Joomla and WordPress have become even more apparent now that I’ve been able to become a little more familiar with WordPress. Joomla has A LOT more available to it from the initial install where as WordPress is simple and allows you to build from its simplicity. Joomla takes a different approach because of the fact that it’s a CMS in its entirety and not just a blogging platform. WordPress however seems to start off being easy and highly customizable without the headaches of how everything works and how it all comes together. I can appreciate both applications in what they do and how they approach the end-user experience. They’re both very great in their own right. I started this blog expecting to completely dis-own and bash the Joomla platform – if you want to call it that – only to realize that in it’s own right Joomla is an awesome application when used correctly. There is a definite learning curve but in the end it offers so much out of the box, it’s amazing.

On the other hand is WordPress. Simple and small but with an enormous user-base and wealth of support from it’s community of users and developers. I really appreciate the fact that it starts off easy and as simple as possible. I keep using the term “simple” because that’s exactly what it is: simple. For me this is more of a hobby that I anticipate being able to make a little money on for people/clients wanting a web presence with their business or personal endeavours. So I don’t want to spend a lot of time configuring and editing an interface on top of skinning a theme and creating menus or hacking components. So with that in mind, after the WordPress install and a few graphic modifications, I was off and running creating content.

The first thing I did after my WordPress installation was look for a blank and easily customizable theme. Initially I was using something a little more generic when I stumbled onto Thematic from ThemeShaper.com. The install was fairly simple and so was the skinning of the theme. I obviously didn’t change much besides the page background and header graphics. That of course, is the beauty of open-source. No need to build what’s already been built and made available to you. So “thank you” Ian Stewart for your work and dedication on the Thematic theme. Here’s your plug.

The theme isn’t completely finished and I have some IE tweaks to finish but for now the logo shows up fine only the background doesn’t in IE yet. Did I mention I can’t stand IE? If I haven’t stated that yet, I do.

Well, that’s it for now. I’ll obviously continue my ventures and hacks into WordPress so stay tuned for more. If you’re interested in my latest involvements or just “what I’m doing.” You can follow me on Twitter. Thanks for reading and comments are appreciated.

Related Posts

1. My Dig Into WordPress So Far; Vs. Joomla
2. WordPress: Plugin Update Available
3. Controlling Image Sizes In WordPress