Greasemonkey Script: Find images that are too wide

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.

Inserting an image that's the right width Inserting an image that's too wide in Firefox

Find Wide Images is a GreaseMonkey script for Firefox. I use it to find images that are too big and would “break” fixed width blog themes under Internet Explorer.

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.

Why would you want to find images wider than a certain size on a web page?

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.

Very Important

This script doesn’t work “out of the box”. You need to edit the list of pages it runs on to include your blog. Find out how to do that.
I’ve set it up so that the default width is 500px (which is good for most WordPress.com templates) but you may need to change the value for whatever is appropriate for your site. Find out how to do that.

How to install it

You need to use the Firefox web browser
You need to have the Greasemonkey extension installed
1. If you really want to use it with Internet Explorer, it might work with Trixie or Turnabout installed
You need to go here and install the Greasemonkey script

Tested with Greasemonkey 0.6.6 and Firefox 2.0.0.1

Initial Configuration – Configure to use your blog

You need to configure the script to run on your blog.

Step 1: Open the Greasemonkey management window.

Tools >> Greasemonkey >> Manage User Scripts

Step 2: Select the script and edit the “Include Pages”

Step 3: Change the URL from beatsentropy.com to your blog address

I would use *

NOTE: the final * at the end of the URL is important.

Initial Configuration – Change the image width

Step 1: Open the Greasemonkey management window.

Tools >> Greasemonkey >> Manage User Scripts

Step 2: Select the script and choose “Edit”

Step 3: Find the line with MAX_WIDTH and change the value from 500 to what you want it to be.

NOTE: It will open whatever your default application for .js file is. Notepad is fine.

Like it? Link it!

I’m glad you find it useful. I rarely check my blog in IE6 so I needed a quick way to identify problems when running Firefox.

Show your appreciation by linking to this page: http://internetducttape.com/tools/wordpress/findwideimages/

Want a feature? Reporting a bug?

7 Responses

Subscribe to comments with RSS.

billg said, on January 13, 2007 at 4:44 am

Ok, are you talking about running afoul of IE’s wrong-headed notion of the Box Model? I.e., IE 5 and 5.5 size block elements differently than the rest of the world. So, I think, does IE6 in quirks mode, but I’m not sure about that.

I just size photos to fit. Don’t put a 300-pixel photo in a 200-pixel space. No problems. Or, am I missing something obvious?

The flipside of this is how to handle images in fluid and elastic displays. Do they always stay the same size, or do you find a way to show more picture as the page size increases?
engtech said, on January 13, 2007 at 7:41 am

Yes, that’s what I’m talking about. I’m running Firefox, and I needed a way to find out if I’m doing something that breaks the IE6 box (because it will look fine in FF).

What this script is all about is automatically telling you when you put a 300-pixel photo in a 200-pixel space, since it would look ok in Firefox, but horrible in IE6.
renaikan said, on January 14, 2007 at 12:03 am

I adjusted my photo size to fix this as well. It’s such a burden to jump from one browser to the other to double check that it displays correctly.
engtech said, on January 14, 2007 at 12:43 am

Yup. That’s why I wrote this, so that I can check it all out in Firefox.
Brian said, on January 16, 2007 at 10:12 pm

Thanks. I usually remember to adjust the width, but sometimes I forget. I wasn’t sure it was working (because apparently I don’t forget often), but 7 pages into my blog I found one.

Thanks again.
Lloyd Budd said, on January 17, 2007 at 2:40 am

You are always working on the cool.
engtech said, on January 17, 2007 at 2:43 am

What’s funny about this:

Script to find bad images: 4 minutes to code.
Documentation: 30 minutes.

:)