Plugin: Configure Better File Uploader


Once you’ve installed Better File Uploader you’ll need to visit the plugin’s Settings screen. BFU2 can be configured at the system level or the blog level. Making selections at the system level will become the defaults at the blog level.

settings.gif

The Settings area holds a lot of options. All of these options let you configure BFU2 to work just how you want and to display only the attributes you need. There are, however, a lot of options and you may want to refer to this documentation for details of each of them. Also, you can mouse over many options to see a tooltip that will give you a little more information about it. For experienced Movable Type/HTML users, the tooltips may be enough help.

Selecting the System Override checkbox will allow you to use one set of options to work across all weblogs of your MT install; if unchecked, blog-level options will be used.

Disabling the tooltip documentation will remove the tooltips that appear during the upload process. Experienced users likely won’t need these, so hiding them simply stops them from popping up when you run your mouse over the field. Note that this does not disable the tooltip help in the Settings screen.

Simply click each section to expand it and access the options within, which are detailed below.

settings-fu.gif

As expected, enabling multiple file uploads will let you upload many files at once. At the start of the upload file process an additional upload file field will appear after you’ve selected a file. Additional fields will continue to appear as necessary.

To upload your files to a specific location on your server, specify an Upload Path. Up to three different paths may be specified, in addition to the weblog’s Site URL and the current weblog’s categories basenames. You must create at least one location to upload to. To appear when uploading a file, the three user-specified options require that either the Upload Path or Year fields be used.

The Upload Path is relative to the Site URL, creating a structure such as <Site URL>/images/, for example.

The Year, Month and Day Append Date checkboxes will append a 4-digit year, and 2-digit month and day directory structure to the specified Upload Path. You can leave the Upload Path blank and check the Year, Month and/or Day fields to create a <Site URL>/2006/09/05/ path, for example. Combine the Upload Path and Append Date options to build a larger path, resulting in <Site URL>/images/2006/09/, for example.

The Default column lets you select a path to be preselected when starting an upload. Specify only one path to restrict users from placing uploads in different locations.

The Extra Path option is a short text field where an additional folder or path can be specified. The append entry basename option will try to place the current entry’s basename in the Extra Path field. In order for this to work correctly, you must be editing a new or existing entry, and that entry must have a title. The entry basename does not need to be displayed/editable for this function to work. Note that if you change the entry basename (or change the title before saving—therefore changing the basename), the upload path will not change. Of course, if the basename wasn’t picked up at the start of a file upload, it’s easy to just type a folder name into the Extra Path field.

Use the Resize on Upload feature to resize an image during the upload process. This is a great way to ensure consistent sizes are used on your site. The resizing options are based on the thumbnail resizing options, as discussed below. Enabling the Allow resizing to be overridden option will place a “Resize on Upload” checkbox on the file upload interface.

settings-thumbnailing.gif

BFU2 requires that ImageMagick or NetPBM be installed to make thumbnails, just as Movable Type does.

If ImageMagick or NetPBM were not found BFU2 will still work fine but you will not be able to create thumbnail images, just as with MT’s upload file tool. Contact your host or administrator about installing ImageMagick for you; be sure the ImageMagick application and Image::Magick Perl module are installed. You can install NetPBM yourself.

The Create Thumbnails checkbox enables the thumbnailing options. You may want to uncheck this option if you never use thumbnails and simply don’t want to see those options during the upload process.

The thumbnail size calculation option is very flexible in determining how to resize your uploaded image to create a thumbnail.

  • The longest side option uses the longest side of the image—whether width or height—and the pixel value you enter to calculate the thumbnail size.
  • The fixed size option lets you specify a fixed-width or fixed-height thumbnail size. The image width or height (as selected) will always be used for the thumbnail image size, while the other dimension will automatically be calculated.

Enabling the create a thumbnail image checkbox will simply check the “create thumbnail” option during the upload process. It’s a simple option, but if you prefer to use thumbnails, it will save you one extra click.

By default, when calculating a thumbnail’s size, the thumbnail will maintain proportions so the smaller thumbnail does not appear stretched. If, for some reason, you want to vertically or horizontally stretch your image, enable the constrain proportions checkbox display. During the upload process, you’ll be able to uncheck this box to stretch your image.

settings-processing.gif

The Add a watermark to all uploaded images option will composite a graphic on top of your uploaded image. (ImageMagick is required for this feature; NetPBM will not work.) A watermark is often used for identification. Refer to the Image Handling Check page for details on the type of transparency you can use within your watermark.

Specify an absolute path to your watermark file. It will be in the form of /home/user/domain/image.png, for example; this is not a URI. You can refer to your weblog’s Site Root if you need help determing the path. Use a GIF or PNG file as the watermark image. Creating a watermark image is outside of the scope of this document.

Select the watermark placement location, and choose to allow/disallow overriding the watermark placement during upload.

When uploading a file—or especially, when uploading many files—it’s convenient to take a quick look at the photo you’re working with. The show image preview option will present a small thumbnail of your image when you hover your mouse over the “Preview” text.

If you want to, you can fill in your image’s alt and title attributes. The alt attribute is displayed for those who have image downloading turned off in their browser and for those who use screen readers. The title attribute is displayed when you hover your mouse over the image.

The title attribute is also used for some other purposes: If you’re uploading a non-image file, the title text will be used as the link text. (MT’s file upload tool results in the text “Download file.” With BFU2 it can be more descriptive or specific, such as “Download myarchive.zip.”) If you use BFU2 to create a Lightbox gallery, the title text will be used as the image’s caption. The title attribute is used for the “title” field of the Asset.

Easily add specific styling to an image with the append additional attributes option. You can use this field to associate any extra attributes with the imgall uploaded images. If you'd like to set the attributes uniquely for each image (or just want the option of changing them) be sure to enable the show a field... checkbox.

Wrappers allow you to easily wrap some HTML you specify around the upload's resultant HTML to maintain a consistent look across your site. An example (with the wrapper highlighted in red, and the upload's resultant HTML in black):

<div style="float: right"><img src="a.jpg" height="50" width="50" alt="a.jpg" /></div>

Using Wrappers is fairly simple: as demonstrated by the example in the plugin’s Settings, just specify the name, opening HTML and closing HTML, and choose which is the default option. You can use two different wrappers (and additionally, a “No wrapper” option is always present). Be sure to see Examples and Ideas for more specific details and suggestions about how you can use Wrappers.

If you’re using Movable Type 4.3 or greater, you’ll find that Better File Uploader can work with the Entry Asset Manager. Be sure to enable the asset association checkbox for this capability. When checked, uploads will be added to the Entry Asset Manager and can be inserted into the Body or Extended fields; when unchecked uploads will not be added to the Entry Asset Manager but can be inserted into the Body or Extended fields.

settings-publishing.gif

The publishing options dictate how the upload is processed. The uploaded file’s resultant HTML can be presented to you in three ways: a new entry can be started, with the resultant HTML placed in the Entry Body field; a new entry can be started, with the resultant HTML placed in the Extended Entry field; or the HTML can simply be shown to you. Place a check next to the options you would like available during the upload process, and select one of them to be the default option.

Show or hide the buttons you prefer to use has some more in-depth options than you might expect. The basic premise of this option is simple: if you don’t like to make Popup Images, for example, you can hide that button during the upload process so you never accidentally click it. The same goes for the Embedded Image option. There are four button options, however: Popup, Embedded, Page Builder and Photo Gallery.

Page Builder

The Page Builder will publish your image to its own page, much like the Popup option. With Page Builder, though, the image does not “pop up;” it appears as a normal page on your site. Page Builder works by creating a URI with your image path, dimensions, etc., which gets handled by a special Index Template to display correctly to the page’s visitor. PHP is required to use Page Builder.

Clicking the Page Builder checkbox gives way to more options. The title and description options will present a field for you to enter this information during the upload process. There is no specific restriction on the title or description length, however I simply recommend that you “keep it reasonable.” Neither field is meant to hold paragraphs of information.

If you’re using the Page Builder, the title field is also used for the Asset title. The description field is used for the Asset description.

A special Index Template is needed by Page Builder. Specify a file name to use when the template is created. The file must be parseable by PHP, which typically means it should end with a .php extension. The first time you use Page Builder the template will be created and built for you.

One of the biggest benefits of Page Builder is the custom template. Access it through the Templates section of your weblog. The name “BFU: Page Builder” must remain the same to work, though you can change the output file name and template contents. The default template follows the standard MT archive template, meaning it will pick up and use your stylesheet. Update it however you like: use the Widget Manager, include advertising, or reformat the Page Builder title and description. Note the PHP used throughout. This must remain for the template to correctly work with the URI that Better File Uploader generates.

Though the template is created automatically, you can download it, if you like.

Photo Gallery

The Photo Gallery button provides you with two ways to quickly build a photo gallery: using the EDSMT Basic Photoblog Templates or Lightbox2.

Of course, the first step is to set up the Basic Photoblog Templates in a new weblog, following the instructions. Once that is done and working, you can use BFU2 to make adding a new photo easier. If you want to use the Basic Photoblog Templates, choose to Place the photo path in the Entry Body field of a new entry. If you’ve developed your own templates that require a similarly-processed path in the Extended Entry field, select that option.

When configuring BFU2 for use with a photoblog, it makes sense to disable most other options. For example, the alt and title attributes will not be used, Wrappers will not be used and multiple file uploading is not supported.

The other photo gallery option is to build a gallery with Lightbox2. Similarly, the first step is to set up Lightbox2, following those instructions. Select the Lightbox2 option in BFU’s Settings screen. If you upload multiple files and choose the Lightbox button to publish, those files will be stacked into a Lightbox-style gallery. The Lightbox gallery ID will randomly be chosen as a number between 0-99. Examples: rel="lightbox[2]" and rel="lightbox[49]". This is done to try and help negate the likelihood of two Lightbox galleries on the same page inadvertently being merged into one. Single-file Lightbox uploads will result in the rel="lightbox" attribute being added. Be sure to see Examples and Ideas for more specific details and suggestions about how to use the Lightbox option.

The Link button—used when non-image files are uploaded—can not be disabled.

Post-Publishing Options

settings-post-publishing.gif

Post-publishing options are available only if you’ve chosen “Show me the HTML” on the processing screen.

Select all of the HTML with one click will do just that when you click in the resultant HTML’s textarea. It’s just an easy way to ensure that you’ve got all of the resultant HTML selected and that you don’t accidentally miss anything.

Result Stacker is enabled with the Show Result Stacker button option. Result Stacker will save the HTML BFU2 created. On the next upload, that HTML will be “stacked” with the next upload’s HTML. If you’re using single-file uploads, this is a great way to assemble a list of photos or files to download. Or, if you’re using Lightbox to build galleries, Result Stacker can be used to save several galleries in a row.

If you don’t feel like cutting and pasting the resultant HTML with keyboard shortcuts, you can use a button to do the job. Show the Append to Entry Body button and Show the Append to Extended Entry button will append the resultant HTML to the specified field of your entry. Of course, this only works properly if you’ve got an entry displayed for editing.

settings-speeddemon.gif

Enabling the SpeedDemon will place another button on the upload screen. Click this button for lightning-fast processing and publishing of your file by using the default options specified in each of the above sections. The SpeedDemon just gobbles up your file and fire-breathes some HTML back at you—basically, this becomes one-click uploading.

When uploading a file, note that you can choose which Wrapper is used, as well as the publishing method.

After you’ve configured BFU2, you’ll want to use it.