« Install Movable Type 4 in Yahoo! Small Business | Main | Movable Type Scheduled Tasks »

Add Scrollbars to Image Popup Windows in Movable Type 4

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,
left=0,top=0'); return false">%s</a>|,

3. Change

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

Post a comment

(If you haven't left a comment here before, your comment may need to be approved before will appear on the entry. Thanks for waiting.)