Adding A Border To All Uploaded Images


Published on October 17, 2004 at 11:48 AM EST
In the Tutorials category.

Almost everytime I upload a photo or image to danandsherree.com, I upload a 640 × 480 pixel image. I use Movable Type’s Upload File feature to help by creating a 128 × 96 pixel thumbnail image. The Upload File feature generates some HTML so that clicking the thumbnail shows the big image. The problem is, the HTML always specifies border="0"; I want border="2" so that it’s obvious the thumbnail is a link. I finally remedied that problem, and it was pretty simple.

http://www.eatdrinksleepmovabletype.com/upload/2005/10/upload-thumb.gif
http://www.eatdrinksleepmovabletype.com/upload/2005/10/upload-2-thumb.gif
http://www.eatdrinksleepmovabletype.com/upload/2005/10/upload-3-thumb.gif

You’ll need to modify lib/MT/App/CMS.pm. Open it up and search for “border="0"“—you’ll find it at line 1890.

my $link = $thumb ? qq(<img src="$thumb" width="$thumb_width" height="$thumb_height" border="0" />) : "View image";

Simply edit “border="0"” to read “border="2"” (or whatever size you’d like your border to be).

That change fixes the “Popup Image” option, but the “Embedded Image” option is still wrong. In fact, the “Embedded Image” option doesn’t include a border setting at all! So, go down a few lines to line 1898:

<a href="$url"><img alt="$fname" src="$thumb" width="$thumb_width" height="$thumb_height" /></a>

Change it to read:

<a href="$url"><img alt="$fname" src="$thumb" width="$thumb_width" height="$thumb_height" border="2" /></a>

Thumbnailed images now display the border correctly, but if you don’t create a thumbnail you’ve still got one more change to make. Go down a few lines further to line 1902:

<img alt="$fname" src="$url" width="$width" height="$height" />

Edit it to read like this:

<img alt="$fname" src="$url" width="$width" height="$height" border="2" />

Save and you’re done! An uploaded “Popup Image” now shows this:

<a href="http://www.danandsherree.com /upload/2004/10/upload-default1.php" onclick="window.open(' http://www.danandsherree.com /upload/2004/10/ upload-default1.php', 'popup', 'width=408, height=484, scrollbars=no, resizable=no, toolbar=no, directories=no, location=no, menubar=no, status=no, left=0,top=0'); return false"><img src="http://www.danandsherree.com /upload/2004/10/ upload-default-thumb.gif" width="107" height="128" border="2" /></a>

Incidentally, if you notice the unique upload directory structure (/upload/2004/10/), you might be interested to read Making A Dynamic Upload Directory.