Greasemonkey Script: Find images that are too wide and break your blog template
Ever try to stick a 550 pixel-wide image into a 500 pixel-wide space? Firefox will increase the space, but under Internet Explorer 6 (or lower) it will move the sidebar so that it comes AFTER the blog posts.
Figure 1: Crappy MSPaint drawing explaining what I’m talking about.
Blog themes come in two flavours. Fluid/liquid where the template stretches around the content to use the maximum width and fixed where the template will always be a certain number of pixels wide.
Problems can arise when using a fixed width template with images. If the image is too wide to fit it can stretch the fixed width section. This can break your sidebar in Internet Explorer 6 by pushing your sidebar so that it comes after all of your content.
As a Firefox user I don’t “test” my blog in Internet Explorer 6 very often (even though it still has 50% of the browser market share). So I needed a script that scans my blog and warns me if I’ve added an image that is too big and will break my blog template under IE 6.
What it does
- Warns if images are too big and will break your blog.
- Suggests dimensions for resizing images so they will fit.
Figure 2: Highlighting which image is too big and breaks the theme.