smackfoo.com | I find your lack of faith disturbing.

Smithers.. release the hounds!

My experience post creation and releasing a certain theme goes a little something like this:

• broadleaf is released.. time passes..
• broadleaf is poked and prodded by quite a few folks.. time passes..
• a bunch of issues are discovered and fixed.. time passes.
• I read Lorelle’s reminder on the joys of oversized element content.. time pas.. oh noes..

As a result of this I have updated broadleaf ((.. as a refresher you can view the original post.)) to trigger an overflow for the ‘left’ column when in ‘two column’ mode.

If you’re posting an image or content that’s wider than the ’single column’ mode then it will naturally sit over the non-existent sidebar.

Does my bum look big in these pants?

To quote Lorelle (’cause I can and it’s fun yo..):

Have you ever tried to shove a square peg into a round hole? Or squeeze into a size 2 dress when you really should be wearing a 22? The results are what happens to web page designs when someone tries to cram something too big into a small space.

I can’t say I have much issue with clothing size, as I’m a pudgy little bastard and will spot around in anything from Hawaiian t-shirts and board shorts to suits and designer shirts without to much issue. Which brings up a small point regarding content and overflow.

Theme’s shouldn’t have to ‘trap’ overflowed elements to begin with. Ideally rather than deal with overflow at the ‘design’ level, we should provide img classes that trigger resizing as needed - for example the following CSS is used to restrict images to not exceed the limits of their parent element.

#cleft img {max-width: 500px;
width: expression(this.width > 500 ? 500: true);
}

This captures virtually every browser, as most modern browsers will adhere to max-width
, those that don’t, for example Internet Explorer 6, will parse the javascript expression and achieve the same result. You’ll also note that I have set a parent id to ensure it’s only the main content images that get the brute force treatment.

By default I tend to set images at a comfortable size prior to uploading — this code simply ensures that if my math is out, no harm, no foul. If an image is far to big for it’s container, most folks are going to work that out for themselves, however the above is a useful addition to any CSS style sheet as it captures img tags without having to use ugly hacks such as overflow, which will often cause more harm than good.

Oh, as a side note? Over 80% of the visitors to this site¹ have a screen resolution of 1024×768 or higher². If an image is too big for a 1024px wide display, then it’s author should be quite aware of the somewhat ugly results almost immediately.

Overflow, where for art thou?

While I accept that a honking great image of Great Aunt Maude attempting to traverse from a car to the kerb is something that some bloggers are just going to post, as they know no bounds when it comes to good taste³ it’s also just plain not wise to try and cram a 800 pixels wide image into an anorexic 400px column - even with overflow Maud’s going to disappear behind the sidebar or other sundry elements. That’s where features like the built in thumbnail generation in wordpress comes in.

You see, the problem is that attempting to thwart a would be oversized image bandit is that as soon as they change the theme, the image has to be handled in yet another trap — change the theme again and guess what happens? Bingo — more trapping of Aunt Maud attempting to escape the bounds of her enclosure..

Shedding some light

There is no ‘easy fix’ for such image skulduggery, however it occurs to me the best approach might be a plugin that ‘filters’ img tags and does some kind of magical formatting to keep Maud under control. Amazingly enough, quite a few others have come to this conclusion. A great example is the lightbox plugin which brings the ajax lightbox love to wordpress.

Upload an image — set the image size in a post⁴ and when a reader clicks said image, javascript kicks in and displays the image in all it’s originally sized glory. The bonus? It works a treat for thumbnails — so you can have your 1000 pixel cake and eat it too.

There are a number of online options as well.. a case in point? flickr generates 4 differently sized images during image upload — if you are yet to score an account, then what the hell are you waiting for?!

Part of becoming an established blogger is the ‘good habits’ learning curve. If bloggers are not ‘kept honest’ by learning the hard way when Aunt Maude attempts to exit stage left out of the browser window, then bad habits will be formed.

Handling images isn’t a complex task, doubly so when the likes of flickr make it a point and click affair and plugins such as the wordpress lightbox plugin simplify the process. Get the photo posting habit’s right from the outset and no matter the theme, you’ll be the next Andy Warhol wooing the populous with your designer imagery.

1. .. this likely includes you, too. Cool huh? (↩)
2. ..indeed 75% of you sport widescreen Apple displays or 1280×1024+ desktop resolution. (↩)
3. .. or reason.. or just don’t give a shit — pick one. (↩)
4. .. for example 600px wide in a 700px wide column. (↩)