Add Scrollbars to Image Popup Windows in Movable Type 4

| No Comments

I post a lot of thumbnail images on Consuming Louisville that link to very large full size images. By default Movable Type doesn't add scrollbars or allow resizing for the popup windows created for images. That's a problem because those large images of mine get cut off with no way to expand the window or scroll to see the rest of the image. So of course I needed to turn on scrollbars and turn on window resizing for image popups.

Like with changing the default image upload location I wish that there was a simple way, within the Movable Type application, to do this but there isn't one as far as I know. Instead we have to do a little monkeying around with the Movable Type application code. But, again like with changing the default image upload location, the is actually quite simple and only requires editing a single line of a single file.

The file to edit is called Image.pm. Assuming you have your Movable Type files in your cgi-bin the path to this file looks something like cgi-bin/mt/lib/MT/Asset/Image.pm.

1. Download Image.pm (I highly recommend you save a backup copy of it before you edit it)

2. Open Image.pm and look for the following:
q|<a href="%s" onclick="window.open('%s','popup','width=%d,height=%d,scrollbars=no,
resizable=no,toolbar=no,directories=no,location=no,menubar=no,status=no,
left=0,top=0'); return false">%s</a>|,

3. Change
scrollbars=no,resizable=no

to scrollbars=yes,resizable=yes

So your final code should look like:
q|<a href="%s" onclick="window.open('%s','popup','width=%d,height=%d,scrollbars=yes,
resizable=yes,toolbar=no,directories=no,location=no,menubar=no,status=no,
left=0,top=0'); return false">%s</a>|,

4. Save and upload Image.pm

Now, the next time you have Movable Type create a popup window for the full size version of an image that popup window will have scrollbars and viewers will be able to resize it.

Leave a comment

About this Entry

This page contains a single entry by published on November 22, 2007 7:48 PM.

Install Movable Type 4 in Yahoo! Small Business was the previous entry in this blog.

Movable Type Scheduled Tasks is the next entry in this blog.

Find recent content on the main index or look in the archives to find all content.