A Better Upload File Template
Published on May 10, 2005 at 12:51 PM EST
Last updated on October 9, 2006 at 12:02 AM EST
In the Tutorials category.
The Better Upload File Template has been superceded by the Better File Uploader plugin. As any regular reader of danandsherree.com likely knows, Sherree and I use the Upload File tool in Movable Type to put a lot of photos…
The Better Upload File Template has been superceded by the Better File Uploader plugin.
As any regular reader of danandsherree.com likely knows, Sherree and I use the Upload File tool in Movable Type to put a lot of photos on this site. The tool works pretty well, but requires a lot of manual intervention: specify a file, an upload folder, a new entry or HTML, and a thumbnail and its size. If there are many photos to add, it becomes a lot of work!
I edited the Upload File templates to better suit our needs: “Show me the HTML” is the default option, clicking “Create a thumbnail…” will resize a thumbnail to the proper dimensions, and a “For Photo Gallery” button makes building galleries much easier. Additionally, the Dynamic Upload Directory hack has been incorporated here.
Alternate Templates
To use these templates, you might want to take advantage of the “Alternate Template” functionality build into MT. Alternate templates can be used to override the default templates, such as I wanted to do here. This way, you won’t have to edit the default template, and if something is wrong with the alternate it’s easy to revert to the default. In mt.cfg, add the line
AltTemplatePath ./alttmplThen, you’ll need to create an alttmpl folder in your MT folder. And within that create a cms folder, creating a structure like this: alttmpl/cms/.
Upload File Templates
Most of the added functionality is handled with JavaScript right inside of the Upload File templates. Download upload.tmpl and upload_complete.tmpl, then upload to alttmpl/cms/. If you don’t want to use the alternate template path, upload to tmpl/cms/, overwriting your current templates.
Give it a try! Clicking “Upload File” in MT should popup the dialog with upload/year/month/ in the Local Archive Path and Local Site Path fields. Upload a file.
The next screen (shown at top) now defaults to the “Show me the HTML” option. Clicking “Create a thumbnail…” will make the longest side of the thumbnail 128 pixels and the other side proportionately correct. The Popup Image and Embedded Image options both work the same as with the default template.
If you’d like your default thumbnail size to be something different, look in the upload_complete.tmpl file you just downloaded. At line 90 you’ll find the FixThumbnailDimensions function, which specifies the ‘128’ default size. Change the dimension here (in both places, at lines 92 and 95) to your preferred thumbnail longest dimension.
The “For Photo Gallery” Button
The “For Photo Gallery” button is sort of a special case. Try it now, and it won’t work. To use it, you’ll need to edit lib/MT/App/CMS.pm and be using the Entry Body as the path to your photo gallery photo. This step is entirely optional. If you aren’t using this style photo gallery, it’s likely useless to you.
To restate the part about the path, if you use something like <img src="<MTEntryBody>-thumb.jpg"> in your Category Archive and <img src="<MTEntryBody>.jpg"> in the Individual Entry Archive to put your gallery together, this will work. The Basic Photo Gallery Templates will work correctly with the “For Photo Gallery” button.
That said, open lib/MT/App/CMS.pm. Towards the end of the subroutine _process_post_upload, you’ll find this code:
} elsif ($q->param('include')) {
(my $fname = $url) =~ s!^.*/!!;
if ($thumb) {
return <<HTML;
<a href="$url"><img alt="$fname" src="$thumb" width="$thumb_width" height="$thumb_height" /></a>
HTML
} else {
return <<HTML;
<img alt="$fname" src="$url" width="$width" height="$height" />
HTML
}
} elsif ($q->param('link')) {
return <<HTML;
<a href="$url">Download file</a>
HTML
}
}And replace it with the below code. (Note the addition of the “photogallery” elsif.
} elsif ($q->param('include')) {
(my $fname = $url) =~ s!^.*/!!;
if ($thumb) {
return <<HTML;
<a href="$url"><img alt="$fname" src="$thumb" width="$thumb_width" height="$thumb_height" /></a>
HTML
} else {
return <<HTML;
<img alt="$fname" src="$url" width="$width" height="$height" />
HTML
}
} elsif ($q->param('photogallery')) {
(my $fname = $url) =~ s!^(.*)\.jpg!$1!;
return <<HTML;
$fname
HTML
} elsif ($q->param('link')) {
return <<HTML;
<a href="$url">Download file</a>
HTML
}
}Save and you should be done! After uploading a file, click the “For Photo Gallery” button—it will check the “Create a thumbnail…” checkbox and resize the thumnbail, then place the URL (minus .jpg extension) in the Entry Body of a new entry!
If you found this article useful, please consider supporting this site through a donation.
Comments
So far, there are 5 comments and Trackbacks on this entry. Add yours!
Thanks for the above code! I had one request - I used a fixed thumbnail size in my photogallery - so how can the above be tweaked so it automaticlly makes a thumbnail at a predifined size?
Scratch the above - I figured it out… but I have one further question: Instead of the link to the image appearing in the entry body textbox, I would like it to appear in the extended entry box. (not knowing any perl…)
I’ve tried to figure out how to make the path be pasted into the Extended Entry field, but I can’t figure it out. But then, my Perl hacking skills are pretty minimal.
Hey, thank for this info! So, any idea of how I could A) change the HTML it creates to include an “alt” tag, a target, and as mentioned in the above comment, set it to always create a thumbnail at 150 pixels width and let it constrain the hieght to the correct proportion?
To add an alt tag, you’ll need to edit CMS.pm. In the same _process_post_upload subroutine, there are a few spots to add it.
As far as setting a height for a thumbnail, try editing the FixThumbnailDimensions JavaScript function in upload_complete.tmpl to something like:
function FixThumbnailDimensions(f) {
f.thumb_width.value = ‘150’;
adjustWidthHeight(f, 1);
}
I think that should work. You should also check out the Better File Uploader plugin.
TrackBack URL for A Better Upload File Template:
http://www.eatdrinksleepmovabletype.com/cgi-bin/mt/mt-tb.cgi/279