A tip for images in WordPress
- August 14th, 2006
- Write comment
One of the great features of WordPress 2.x is the ability to upload an image *while* you are composing a post, instead of the old method which was FTP’ing an image and then manually writing a link to the image within the post or using the built-in upload feature that was contained in another section of the admin panel. With this new feature, you now have two options: display the original image or display a thumbnail which links to the original. The second option is useful if the dimensions of the original image are so large that inclusion “breaks” your layout; sometimes, that original image needs a separate display so that the details are legible.
But, what if you would just rather resize the image so that it can be included within the post? Fortunately, the content areas of most WordPress themes have a fixed width. All you need to do now is find out what that width is. One way of doing that is to first take a look at the source code of your page. Scroll down the source code until you find the beginning of an entry (you wrote it, you should know what you’re looking for, right?)
Now identify the div tags just above the entry. In my case (theme), I see tags called “content”, “narrowcolumn”, “post”, “entry”, etc. Somewhere within one of those tags are instructions on how wide the browser should display the content area. To find those instructions, you will need to look at the stylesheet for that theme, so just login to your WordPress admin, go to “Presentation” and then “Theme Editor”. Now click on “Stylesheet” on the right. Scroll down and look at the specs for these tags until you find one for width:
There it is! According to “narrowcolumn”, my content area is 500 pixels wide. So that’s how wide my images can be, right? In most cases – Wrong. Look at your site again. You will see that there is some padding between the text of your posts and the borders. That padding will have to be subtracted from the maximum image width. Jeeze, now I need to go back and find the tag that contains those padding instructions. Hmmm, it’s not there. Nope it’s not here either. You know what? To heck with this! Since I use FireFox, I’m just going to use a nifty little extension called MeasureIt. After it’s been installed, you’ll see a little icon down in the bottom-left corner of Firefox. Click on it and measure your absolute text area.
(click to enlarge)
So, according to MeasureIt, my max width can be 501 pixels. Just to be on the safe side, I’m going to back off a little and make it 495. That should be easy to remember. That was the number of the F-15 I was assigned to in the Air Force. Or was that 492? You know what, I think I’ll just put a little post-it note on the side of the monitor.
The only thing left to do now is resize my image. Don’t have a program to resize images? Just download a freeware program such as FastStone Image Viewer.
Now I have one more issue to address. The third image above is a thumbnail, but personally I think it sucks that WordPress made it so small, so one of these days I’m going to open wp-admin/inline-uploading.php, scroll down to line ninety-something and change:
$thumb = wp_create_thumbnail($file, 128);
elseif ( $imagedata['height'] > 96 )
$thumb = wp_create_thumbnail($file, 96);
to:
$thumb = wp_create_thumbnail($file, 256);
elseif ( $imagedata['height'] > 192 )
$thumb = wp_create_thumbnail($file, 192);
That’ll double the thumbnail size.
Hopefully, in an upcoming WordPress release, they’ll give us a preference on thumbnail sizes.
