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

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


Create a Contact Form using MT4 | Email | Learning Movable Type

« Working with Movable Type 4.0 Templates: Sidebar | Main | Putting MT:MultiBlog to Work »

Create a Contact Form using MT4

I have used the contact form on previous versions of Movable Type following the instructions from Learning Movable Type and it’s always worked well. Trying to implement it in MT4 has proved more difficult because of the way the templates are set up using modules. Several templates need to be modified to get this to work.

Before you begin, install the ReCaptcha plugin provided by Movable Type.

  1. Copy the reCaptcha folder from extras/examples/plugins to your plugins directory.
  2. Edit the reCaptcha.pl file: change system_config_template to config_template at line 20.
  3. Also in reCaptcha.pl at line 29, add your keys like so:
['recaptcha_publickey', { Default => 'YOUR-PUBLIC-KEY-HERE' }],
['recaptcha_privatekey', { Default => 'YOUR-PRIVATE-KEY-HERE' }],

Update: Editing recaptcha.pl is not necessary since the release of Movable Type 4.01. Install as per the readme in the plugin folder and it should work properly. (A good reason to update!)

You need to create a new blog. I called mine Contact.

Now go to the Movable Type dashboard in your browser, Preferences > Blog Settings > Comments. Choose “Immediately approve comments from AnyoneR