// Internet Duct Tape

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 widthInserting an image that's too wide in FirefoxInserting an image that's too wide in Internet Explorer

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.

greasemonkey-imagewidth-sample.png

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

  1. You need to use the Firefox web browser
  2. 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
  3. 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

greasemonkey-manage-scripts.png

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

greasemonkey-imagewide-change-sites.png

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.

greasemonkey-edit-pages.png

Initial Configuration – Change the image width


Step 1: Open the Greasemonkey management window.

Tools >> Greasemonkey >> Manage User Scripts

greasemonkey-manage-scripts.png

Step 2: Select the script and choose “Edit”

greasemonkey-imagewidth-edit1.png

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.

greasemonkey-imagewidth-changewidth.png

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/

See the full list of free software I have created.

You can get frequent updates about all of my new software, tools or blog themes by subscribing to IDT Labs by RSS or by email. Or you could just subscribe to my main blog, Internet Duct Tape.

Subscribe to feed

Want a feature? Reporting a bug?

Post a comment here.

7 Responses

Subscribe to comments with RSS.

  1. 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?

  2. 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.

  3. 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.

  4. 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.

  5. 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.

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

    You are always working on the cool.

  7. 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.

    :)


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

Join 286 other followers

%d bloggers like this: