Adding A Border To All Uploaded Images


Published on October 17, 2004 at 11:48 AM EST
Last updated on October 9, 2006 at 12:02 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…

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.

This article is tagged as: HTML, Tutorials

If you found this article useful, please consider supporting this site through a donation.

Comments

So far, there are 2 comments and Trackbacks on this entry. Add yours!

1

By abhi , written on October 17, 2004 at 9:24 PM.

hmm… impressive. good work Dan :)

2

By bruce21 , written on May 12, 2005 at 11:50 PM.

Next time you pokin around in there, *one* of the code collections for the img tag doesn’t have the alt=”Fname”, as shown in your lower code for result. Seems six apart mussed a couple things. Unfortunately the one they missed is the one for the image on your page. Not a biggie, just need it to validate.

Post a comment

 
 
 


TrackBack URL for Adding A Border To All Uploaded Images:
http://www.eatdrinksleepmovabletype.com/cgi-bin/mt/mt-tb.cgi/190