JBot Mania

**PLEASE NOTE: After switching themes I’ve had to go back and futz with this. It’s not finished yet so you won’t see the nice dimming effect. As soon as it is, you will, but the steps here will still work for you. Thanks. **

So I’ve been struggling with the non-existent image uploading capabilities of WordPress. Frankly, it has been the one real thorn in my side since converting from Blogger.

Well, I just may have found the right Plugin. Three, in fact, that make it easy to upload and insert images, as well as, make it swanky to display them.

Image Manager

Here’s the lowdown. The first Plugin that I found after reading this thorough article from Lorelle on WordPress, was ImageManager. What a fricking fantastic Plugin. It is from Soderlin and not only does it help you upload single images easily, browse images you have already uploaded, and insert them effortlessly into your posts (the biggest problem I have found with WordPress) BUT, it also lets you edit these images. Basic but good tasks such as cropping, rotating, resizing, and flipping. All of this occurs from right within your post—the way it should be. For the full scoop, check out this great flash demo on how it works.

Light Boxes

On another front, there is the display of images in blogs. I’ve tried a few methods in the past that included thumbnails with links, pop up windows, or utilizing layers, etc. etc. None of these solutions seemed all that wonderful. Then there came along the next breed of display—the lightbox.

The lightbox is a great interface for allowing your visitors to really focus in on an image, if they want further detail. What it does is “pop up” the image in a new div, while also dimming the background so that your image is front and center with no distractions. Give it a shot by clicking on the image above of my father and me on my very first day.

As you can see, the display is elegant and closing the image is easy. You will also note the addition of a caption, cleverly tucked into the title tag.

All you have to do, once you have everything setup, is to add

rel="lightbox"

to links around your images. And if you want to add a caption, simply add

title="this is my caption"

with your OWN text, of course, between the quotation marks.

Pairing these two Plugins together gives you quite the imaging arsenal.

A few notes on setting up the lightbox functionality:

There are a number of lightbox scripts out there and I chose to use Lightbox JS by Lokesh Dhakar. I might be a little daft, or a lot, I’m not sure, but I had a little trouble at first with this because there weren’t 100% explicit instructions given. But anyway…

From the web site listed above you’ll have to download 5 files. One javascript file, one CSS file, and three image files. I put them into my Plugins folder even though it’s not really a Plugin, I suppose. I put it in /wp-content/plugins/lightbox.

Once you do that, add the following to your header:
<script src="/wp-content/plugins/lightbox/lightbox.js" type="text/javascript"></script>

and remember to change the path to the path to this file to be RELATIVE to the web page it will be used on - so even if you’re using a template file, go from the root:

/wp-content/plugins/lightbox/lightbox.js

Now, for the CSS. I had some trouble adding another include to the CSS file into my header, so I just added it to the CSS file for the theme I am using. This is NOT the best solution for later on when you want to switch themes, but I wanted it done.

Once that is done, you need to make a couple of changes to the CSS file and the js file to point to the graphics that are used.

In the beginning of the js file, make sure the paths to the close button and the loading image are correct. I had to change mine to:

var loadingImage = '/wp-content/plugins/lightbox/loading.gif';
var closeButton = '/wp-content/plugins/lightbox/close.gif';

In the CSS file, you deal with the png file that gives you the nice dimming of the background. You will edit the following two lines:

#overlay{ background-image: url(/wp-content/plugins/lightbox/overlay.png);

filter: progid:DXImageTransform.Microsoft.AlphaImage Loader(src="/wp-content/plugins/lightbox/overlay.png"

After these changes are done, you should be all set to use this lightbox code with ease.

Batch Image Uploader

One last Plugin is the Batch Image Uploader by mogrify. What this little jobby does is, hold your breath, let you upload multiple images at once. (Let out the breath) This is hugely convenient for those image heavy posts. I have alot of posts on other sites that I manage that have multiple images, and Lord knows I want those images up as fast I can so that I can get that shit done, uppercut!

Anyway, it’s an easy to use interface and saves alot of time.

Here’s one more image for your lightboxing pleasure:

Enjoy and happy image heavy blogging!