Plugin: Better File Uploader Use Examples and Ideas


There are so many ways to configure and use BFU2 that it can be a little overwhelming! Below are some examples and ideas of how you can configure and use it.

settings-processing.gif

After installing, Better File Uploader shows a simple default Wrapper. A Wrapper allows you to put any HTML around your upload’s resultant HTML. This Wrapper (shown below in red) will just float the photo to the right, letting text wrap around it.

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

Example

example.gif

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse tincidunt lorem. Nunc mollis aliquam sapien. Fusce ultrices, dolor in ultrices molestie, erat nisi hendrerit mauris, eu bibendum odio diam et tortor. Fusce placerat placerat ante. Suspendisse ac leo.

Donec elit. Vivamus velit ante, porttitor non, fringilla ut, aliquet vitae, augue. Aenean sit amet nibh id orci lobortis pulvinar. Quisque nisl nisl, malesuada ac, blandit sit amet, commodo eu, elit.


This Wrapper can be improved upon, though, by simply using a class and placing the style in your stylesheet. While you’re at it, you can embellish the formatting further.

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

And the CSS:

.right { float: right;
    padding: 15px;
    margin: 0 0 5px 15px;
    background-color: gray;
}

Example

example.gif

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse tincidunt lorem. Nunc mollis aliquam sapien. Fusce ultrices, dolor in ultrices molestie, erat nisi hendrerit mauris, eu bibendum odio diam et tortor. Fusce placerat placerat ante. Suspendisse ac leo.

Donec elit. Vivamus velit ante, porttitor non, fringilla ut, aliquet vitae, augue. Aenean sit amet nibh id orci lobortis pulvinar. Quisque nisl nisl, malesuada ac, blandit sit amet, commodo eu, elit.


On danandsherree.com I use a more elaborate right-aligned Wrapper. This Wrapper uses two surrounding divs: one to right-align the image, and a second to add some space and supply a background image. Also, the image is horizontally and vertically centered on top of the background image. An example: The Weekend Antenna Party.

Try a Wrapper like this:

<div class="right"><div class="thumbnail"><img src="a.jpg" height="50" width="50" alt="a.jpg" /></div></div>

And use some CSS like this:

.right {
    margin: 10px 0 15px 15px;
    padding: 0;
    float: right;
    clear: right;
    width: 170px; }

.thumbnail {
    margin: 0;
    padding: 0;
    display: table-cell;
    background: url(/thumbnail.jpg) no-repeat;
    text-align: center;
    font-size: 130px;
    vertical-align: middle;
    width: 170px;
    height: 166px; }

Of course, you’ll need to create your own thumbnail.jpg that measures 170 × 166 pixels to use this wrapper as intended. In the example below, I simply used a dark green background.

Example

example.gif

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse tincidunt lorem. Nunc mollis aliquam sapien. Fusce ultrices, dolor in ultrices molestie, erat nisi hendrerit mauris, eu bibendum odio diam et tortor. Fusce placerat placerat ante. Suspendisse ac leo.

Donec elit. Vivamus velit ante, porttitor non, fringilla ut, aliquet vitae, augue. Aenean sit amet nibh id orci lobortis pulvinar. Quisque nisl nisl, malesuada ac, blandit sit amet, commodo eu, elit.


If you’re uploading a number of photos to build a small gallery, you might want to change the positioning and behavior of the photos—specifically, centering them in the entry’s text area; well-suited to working with a Lightbox gallery. Try a wrapper like this to position them:

<span class="center-image"><img src="a.jpg" height="50" width="50" alt="a.jpg" /></span>

And use some CSS like this:

.center-image { margin: 10px; }

The trick is that you need to add another div around the resultant HTML:

<div class="group-images">
  <span class="center-image"><img src="a.jpg" height="50" width="50" alt="a.jpg" /></span>
  <span class="center-image"><img src="a.jpg" height="50" width="50" alt="a.jpg" /></span>
  <span class="center-image"><img src="a.jpg" height="50" width="50" alt="a.jpg" /></span>
</div>

With some more CSS:

.center-image { margin: 0 50px;
    padding: 25px;
    text-align: center;
    background: lightblue; }

Example

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse tincidunt lorem. Nunc mollis aliquam sapien. Fusce ultrices, dolor in ultrices molestie, erat nisi hendrerit mauris, eu bibendum odio diam et tortor.

example.gif example.gif example.gif

Fusce placerat placerat ante. Suspendisse ac leo. Donec elit. Vivamus velit ante, porttitor non, fringilla ut, aliquet vitae, augue. Aenean sit amet nibh id orci lobortis pulvinar. Quisque nisl nisl, malesuada ac, blandit sit amet, commodo eu, elit.


settings-processing.gif

Within the Processing Options you’ll find a field to enter additional attributes to go along with the img tag, such as a style, class, or ID. Any settings entered in this field will be applied to all uploaded images. If you’d rather add extra attributes to only some uploaded images, click the checkbox to show the field during the upload process.

example.gif

At the simplest end of the spectrum, you could add a border to the image:

border="1"

Though a better way to do that would be with CSS:

style="border: 1px solid black;"

Better still would be to use a class and move the CSS into your stylesheet:

class="uploaded-image"

With this CSS:

.uploaded-image { border: 1px solid black; }

The Lightbox JS v2.0 creates a really cool effect for viewing photos, and Better File Uploader can help automate the process. Not sure what Lightbox does? Click the image below for an example.

example.gif

The first step is to set up Lightbox2, following those instructions. I’ve uploaded the Lightbox files into the mt-static/ folder, and have placed the required Javascript links in the Individual Entry Archive’s template, near the top:

<title><$MTEntryTitle remove_html="1"$> (<$MTBlogName encode_html="1"$>)</title>
<script type="text/javascript" src="/mt-static/js/prototype.js"></script>
<script type="text/javascript" src="/mt-static/js/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="/mt-static/js/lightbox.js"></script>
<link rel="stylesheet" href="/mt-static/css/lightbox.css" type="text/css" media="screen" />
settings-publishing.gif

Be sure to enable the Lightbox option in the Publishing Options Settings tab.

If you upload multiple files and click the Lightbox button, those uploaded files will be stacked into a Lightbox-style gallery (try combining this with the Aligning Many Photos Wrapper, above). The Lightbox gallery ID will randomly be chosen as a number between 0-9. Examples: rel="lightbox[2]" and rel="lightbox[9]". 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.

The title attribute field will be used as a photo caption within the Lightbox. Enable the title attribute option within the Processing Options Settings tab.