A Better Upload File Template


Published on May 10, 2005 at 12:51 PM EST
In the Tutorials category.

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

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 ./alttmpl

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

http://www.eatdrinksleepmovabletype.com/upload/2005/10/upload2-template-thumb.gif

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.

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

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!

This article is tagged as: Alternate Templates, Tutorials