One of the more common complaints and problems for new WordPress users is the issue of their images breaking their WordPress Theme. The Theme they choose is wonderful, reflective of their personality and blog, and the moment they upload their first photograph, it seems to break their blog.
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.
All web pages today feature at least two “columns”, two side-by-side sections to display their content. One is typically called the sidebar and the other is the content or main column or something similar. Each of these columns are known as containers, as they contain content and design elements within their borders. When something goes into these containers that exceeds their inherent width, they tend to stretch and break the design.
Put something wider than the width of the sidebar into the sidebar and it stretches to accommodate it. Since it’s literally pushed beyond its seam, it shoves the content section down to the bottom of the page. Put something wider than the width of the content section into the content section, and it shoves the sidebar around. If what you include in any container on your web page is wider than the designated width, something has got to give and it is usually your web page layout and structure.
The key is to only put things that are the maximum width into these columns (containers) so they won’t stretch and bork your web page design.
The problem is that most people using WordPress Themes are not the ones who designed them. They don’t understand things like maximum width or the pushing and shoving around of a web page design with extra wide content. They just want to put pretty pictures in their posts and freak out when the web page design breaks.
So the web designers need to take this ignorance into account when they design their WordPress Themes for the public. Andy Skelton came up with “Defective Themes: Image Width” to help you fix things so everyone is happy and the number of WordPress Support Forum requests for borked WordPress Themes goes down.
This article is aimed at WordPress theme designers. “Aimed” because there is a gun to your head. “Designers” because the issue relates to the specifications that all themes should follow. So take off your Artist hat, put on your Designer helmet and get ready to dodge bullets.
Activate a theme you made. Publish an entry with an image that is too wide for the post column. About 800px should do it for most themes. Now load up Internet Explorer 6. If it’s not a fixed-width theme, resize your browser window to 800×600. If your theme breaks in IE6 you just got your head blown off. Now regrow your head and repeat for every theme you’ve published.
If your themes passed this test, congratulations! You obviously don’t need to be reminded about overflow; carry on.
…What is overflow? Overflow is when a container is too small for its contents. Either the container expands or the contents won’t be contained. The default “physics” of web pages (the box model) dictates that the container expands. You can change the default. I’ll show you how.
Thank you for reminding us, Andy, that designing WordPress Themes for public use means protecting our future users from themselves because they can’t. Excellent work.
For reference, the CSS styles for the stylesheet.css in your WordPress blog should include:
p img {
padding: 0;
max-width: 100%;
}
#header, #content, #footer, .widget {
overflow: hidden;
}
Related Articles
- Attention WordPress Theme Designers: Designing Themes for WordPressMU
- Designing Themes for WordPressMU – Fill In All The Details
- WordPress Theme Designers: Slapping You Upside the Head
- WordPress Design Details
- One Year Anniversary Review: Helping WordPress.com Users
- Choosing a WordPress Theme
- One Year Anniversary Review: One Year Anniversary Review: Designing WordPress Themes
- One Year Anniversary Review: Designing WordPress Themes for the Public
- One Year Anniversary Review: Web Design
- Validating the Code Behind the Page
- Conquering Site Validation Errors
- Fixing Browsers: Bugs and Hacks
- CSS and Web Page Design List of Resources
- When The Blog Breaks: Site Monitoring
- When the Blog Breaks: Fixing Your Broken Blog
- CSS and Web Page Design List of Resources
Site Search Tags: web design, wordpress themes, wordpress help, max image, max-width, image width, broken sidebar, sidebar at bottom of page, css containers, image width, wordpress theme development, wordpress theme design, help with sidebar, sidebar overlap, broken theme, broken design, web design help
Subscribe 
Via Feedburner 
Subscribe by Email 
Visit
Copyright Lorelle VanFossen, the author of Blogging Tips, What Bloggers Won't Tell You About Blogging.
Lorelle on WordPress 
18 Comments
.. nice catch.
I’ve gone and checked my one-and-only released theme and the images ‘overlap’ the sidebar. I’ll consider the back of my head well slapped and will have to fix it at some point
A great post. I’ve tried about 25 different themes over the past year and exactly _one_ has handled oversize images correctly.
While I know there are programming tricks that can make up for this, a simple, easy to find note … you know just text that people can read — telling the max size image would save untold amounts of head scratching.
The other thing that contributes to the problem is the difference between those who use FireFox as a preference and those who have made it a religious campaign. I use FF myself, I love it. But there are many, many folks who won’t (or even can’t change … many government sites and some corporations simply will not allow any browser except MSIE … so if you want to do the work to contribute … make it work with both.
One of the other considerations that most designers fail to consider is text resizing. Here’s a challenge: load your theme/design in any mozilla browser (Netscape, FF or Mozilla) and push the text size (zoom) up a couple of notches and see whether or not your theme breaks. In my random testing, I’d say about 95% of all designs fail …. disasterously. One of the reasons to be concerned with this is that, as the W3C suggests, we are attempting to create accessible webpages … and for the visually impaired, you can BET that they have their default set to something other than 100%.
Which is why all my blog designs are within the 5%. 😉
Go on. Zoom the font size to whatever you need. It will withstand just about anything.
Excellent point!
You can download the plugin: iMax Width. This plugin for WordPress sets a maximum image width so large inline images don’t mess up your wordpress theme. It also adds height and width params to all IMG tags in a posts so the pages load more smoothly.
I have installed it and it works fine. Works when you upload the photo so if you have any existing images that are too wide you will have to delete and upload.
the imax width solved my issues 🙂
Has anyone gotten iMax Width plugin to work with 2.6? TIA
@ piku:
You will need to ask this question on the Plugin author’s page so others familiar with the Plugin can respond, or on the WordPress Support Forum. Or contact the Plugin author directly. Thanks.
Biggest problem I find, is not being familiar enough with the underpinnings of the blog themes to find the sections that detail the parameters.
@ DeBorah Beatty:
See Finding Your CSS Styles in WordPress for helps on that.
Great help, thanks :). Now my sidebar is safe. Only the heighth doesn’t change with the width, so now my images are deformed. Does anyone know some code that will adjust the image heighth according to its width? Thank you!
You need to set the height, and the width, of the images in the image HTML tag. That will resolve that issue.
Thank you Lorelle. Now do you mean i have to adjust every image seperately, or can i do something that will resize ANY image to fit the posts section (=not overlap the sidebar) while respecting the image’s original width and height? I’ve just found my way to WordPress and am learning by the day… Your blog is a great help! 🙂
Depends upon what you are doing. If you are putting in a single image forever, size it on both height and width. If you are changing the images constantly, then have it set to max-width and make sure you don’t choose any images that are too long to include in the sidebar. The width can be set manually or through the CSS, as explained in th article. If the images are appearing distorted, you’re doing something wrong with the size, so set a max-width in the CSS and do not set the height and the images will take care of themselves.
Hi Lorelle, thanks for your support. I did as you told me to but the images remained distorted at first. I have now found the solution: set the height to ‘auto’, like this:
p img {
padding: 0;
max-width: 100%;
height: auto;
}
#header, #content, #footer, .widget {
overflow: hidden;
}
Well done. Thanks for letting us know how it worked for you.
Hello. I’ve tried the coding above.
However the image is still distorted cause the height value remain unchanged (so I need to change it manually by using HTML view)
Any idea to help me solve the issue.
You cannot change the width without changing the height. There are discussions on that subject within the comments, if memory servers. Since I do not know how you used the code, nor if you are using WordPress, it’s hard to give you an answer.
16 Trackbacks/Pingbacks
[…] I read Lorelle’s reminder on the joys of oversized element content.. time pas.. oh noes.. […]
[…] The second problem- where the sidebar moves to the bottom- typically is only seen by the 90% of people who still aren’t using Firefox. Microsoft Internet Explorer doesn’t understand some of the fundamental code to CSS (still)- and you must test by looking at your site using IE 6 on a PC. The simple solution- use Thumbnails- and never have images wider than about 400 pixels. However if you want to read all the details of this problem- Lorelle has a ton of good links – look at the excerpt of her post- then continue on to the link: Lorelle on WordPress One of the more common complaints and problems for new WordPress users is the issue of their images breaking their WordPress Theme. The Theme they choose is wonderful, reflective of their personality and blog, and the moment they upload their first photograph, it seems to break their blog.Web Design Sidebar pushes out over the content areaHave 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. […]
[…] The Battle Between Image Width and Column Width […]
[…] but was unable to fix the browser problem, then I went onto Lorelle VanFossen’s Blog post The Battle Between Image Width and Column Width. According to Lorelle, when a post has items such as banners or pictures that are too large for the […]
[…] The Battle Between Image Width and Column Width […]
[…] The Battle Between Image Width and Column Width […]
[…] The Battle Between Image Width and Column Width « Lorelle on WordPress […]
[…] Width WordPress Plugin sets a maximum image width so large inline images won’t destroy your WordPress Theme layout and design. It adds height and width parameters to all IMG tags so the pages will load faster and conserves […]
[…] The Battle Between Image Width and Column Width […]
[…] The Battle Between Image Width and Column Width […]
[…] The Battle Between Image Width and Column Width […]
[…] The Battle Between Image Width and Column Width […]
[…] The Battle Between Image Width and Column Width […]
[…] The Battle Between Image Width and Column Width […]
[…] The Battle Between Image Width and Column Width […]
[…] the graphic image you want to add is wider than your WordPress Theme column width. The WordPress Image panel allows you to add images as full-size or thumbnails, which when clicked, […]