Weaning yourself off LJ: Images and video

So far we’ve been talking about posting fan fiction to a WordPress-based archive. Now let’s look at how you can add images (such as fanart) and video (such as fanvids).

Uploading images

This could hardly be easier. In the “Write Post” interface, you’ll see an “upload” area. Simply upload the image you wish to include in a post. Choose a short title — this will become the ALT tag on the image, seen when someone’s browsing with a text-only browser — and optionally a description.

(Note: if you have a multi-user blog, a user must be an “Author” at least before she can upload images. To allow mere “Contributors” to upload images, you’d need something like the Role Manager plugin (thanks to Smuffster for putting me on to that one.)

Next you’ll see the “Browse” interface showing what you’ve just uploaded. Here’s an example using some Hornblower fan art done by Black Hound:

Browsing images

This is where you choose how you want the picture to display in your post: full size, thumbnail, or just a link. Choose the options you want, then click “Send to editor”, and a chunk of appropriate HTML will wind up in the text area where you edit your post, at the point where your cursor was.

In the case of “Young Bush”, I chose to show him full-size, since the image isn’t too large to fit in my layout. You can see the results here if you like.

Posting videos

First I’m going to deal with videos hosted elsewhere — on YouTube or imeem for example and then with self-hosted ones.

On imeem, YouTube, and most other video hosting sites, you’ll need an account on their system to upload videos. If you haven’t done this before, I’d recommend imeem, which seems to have a strong established following among vidders. (Sure, YouTube’s got more vids, but the *good* ones are on imeem, as far as I can tell.) How you upload your vids will vary depending on the system you use, so you should follow their instructions.

Once your vid’s uploaded, you can view it. Next to the video will be some code for “embedding” the video. Simply copy and past that code into your WordPress post, and Bob’s your uncle.

Here’s one I uploaded to YouTube (because imeem was timing out on me today):

**51st Century Guy: A Doctor Who fanvid starring Captain Jack Harkness**

But what if you want to keep your vids on your own site? The good thing about hosting your own vids is that you get to track how many people are downloading and watching it, collect comments on your own site, and so forth. The downside is that it can be very bandwidth hungry; you’ll need a web hosting provider that gives you plenty of bandwidth.

Either way, you’ll need to set up your WordPress installation to permit the uploading of video files. Here’s how:

1. Install the MIME Config Plugin.
2. Go to “Options” then “Mime types”. You’ll see FLV is already on the list. You’ll may also want to add other types for different file formats, eg. “zip” for zipped download files, “avi” or “mov” for unzipped movie files, etc. A list of file extensions and their associated mime types can be found here.

You should now be able to upload video files.

Your next choice in regard to videos is whether to let people stream it, or only download it and watch it offline.

Downloadable vids

First, let’s talk about download-only vids. These will cost you less in bandwidth, but require a greater investment in download time from your visitors. On the other hand, many vid-watching fans prefer to be able to download files to watch offline. So you probably want to consider providing a downloadable format, whether you make it the only way to watch the vid or just one of multiple options.

To upload a downloadable vid to your WordPress site:

1. You’ll probably want to zip it first. This means it can’t be played over the web.
2. Next, go to “Write post” and upload your zip file using the upload tool as described in images, above; note that it will take AGES and won’t give you any kind of status report or ETA; just leave it ticking for as long as it takes. (Also see note below, re: max file upload sizes.)
3. Once uploaded, choose “Show: Title” and “Link to: File” when including it in your post.
4. You may also want to include a static “teaser” image, in which case just treat it as any other image, and follow the instructions in the previous section.

(Note: Depending on your web hosting provider, there might be a maximum file upload size in place, and that size may or may not be a reasonable one for vid uploads. On Dreamhost they’ve got it set to 8MB by default, which is too small for my needs. You can override this setting by editing the “php.ini” file (if you have access to it) and setting “upload_max_filesize” to something larger; on Dreamhost, follow these instructions to make special PHP configurations for your own website.)

Streamable vids

If you want your vid to stream in-place from your WordPress archive, here’s how to do it.

1. Install the WP-FLV plugin. If you’re on Dreamhost this comes pre-installed, otherwise follow these instructions for installing and configuring plugins.
2. Next, you’ll need to convert your existing vid to FLV. I use FFMpegX on my Mac, but if you use Windows or another operating system you’ll need to find another suitable tool. FLVs are the standard format for online video sharing sites like YouTube or imeem; if you want to save a vid from those sites, check out KeepVid.
3. Upload your FLV file using WP’s file upload interface. It’ll probably take a while — though not so long as the zip file would’ve, as FLVs are usually done at lower frame-rates and are, overall, smaller. My downloadable vid is 38.5MB but my FLV is only 6.6MB.
4. Using the instructions on the WP-FLV page, use the quasi-HTML <flv> tag to include your FLV file in your wordpress post. To get the appropriate URL for the “href” attribute, you can use the file uploader to include a link to the file and then copy the URL out of that.

Here’s the result over on aroomofonesown.org: a streaming FLV and a download link for offline viewing.

Protecting yourself from bandwidth theft

When you upload images or video to your own site, you run the risk of other people embedding those images/videos on their own webpages. Every time someone views that external page, it’ll leach the images/video from your own site, costing you bandwidth. You might think that it wouldn’t be that big a deal, but if someone starts linking your stuff from their MySpace profile, all of a sudden it might use a ton of bandwidth and — potentially — shut down your site or cost you lots of money.

You can easily protect your fanart (i.e. images) from that kind of hotlinking. Just install the Hotlink Prevention Plugin and activate it.

Unfortunately, this will only protect images, not videos or other file types you might upload. If you’re concerned about video bandwidth, your best bet is to zip your vids and make them unstreamable, or else only upload them to external sites like YouTube or imeem. (If you’re technically inclined, of course, you can write your own Apache Rewrite rules in .htaccess, but I’m not going to go there for now.) Since so far I’ve been using about 1% of the 3.4 *terabytes* of bandwidth Dreamhost give me each month, I’m going to leave streaming enabled for now and see what happens.