professor raincoaster’s little lectures: WordPress and Photobucket 103, putting in pictures

professor beekerThis one isn't that easy, actually. There is a lot to putting in pictures that I don't know, and I shall be sure and tell you so, like right there, where I just said that. Otherwise, when I'm telling you something, assume I know what I'm talking about. It helps my self-esteem.

So you want to put pictures in your blog? Fine, good, "for what is the use of a blog," thought Alice, "without pictures or funny YouTube videos?"

Quite so.

In order to put a picture in your blog, the picture must first already be in cyberspace somewhere. You can't just take a picture from your computer and stick it in the blog. Some theory: when you post a picture in a blog, what you really do is open a tiny hole in that blog which becomes a window to the spot in cyberspace where that picture is. It's like a wormhole, or a tesseract; Einstein should be getting royalties from Photobucket, I tell ya. Naturally, a smartie like you will see that this requires the picture BE in cyberspace, in order to be looked at. WordPress offers this service, called "Hosting" and I'm sure you've heard of hosting pictures. I use Photobucket, so I'll teach you how to use them; I've used them for four years and they've been rock-solid, spam-free, and cost-free the whole time. If you want to get fancy you can pay them a nominal fee and get virtually anything you want, short of a housecall from a cavalcade of love-starved sex-slaves cloned from Janet Jackson and/or Hugh Jackman. That's coming in the next upgrade.

So click on this link and sign up for a Photobucket account. You want the free service, at least to start with. Once you've done that, activated the account, etc, you can start adding photos.

Albums are like folders; they hold all pix under a particular heading, and help you keep things organized. I dunno how many pix I have on Photobucket, but the Politics folder has seven pages of images. I don't want to have to browse through all of those eye-searing Bush/Cheney images when what I'm looking for is the pic of Viggo Mortensen with a muppet on his weenie.

Viggo Muppet

So. I've convinced you that Albums are a good thing. If you know the kinds of things you're interested in, make albums for them because you'll want pix of them eventually; if you have tags/categories in your blog, maybe make albums to match each of these. You don't have to make them all at once. Maybe just start with an album of "Me" and an album of "my cats" or "places I've visited" or "Mug shots" or whatever you need right away. The thing is, once you put a pic in an album, the album becomes part of its web address and you can't move it later without breaking the link, which means making the pic go blank (and have that horrible red X in the corner). So don't go putting a pic of your boss for a marketing report in the "Hot Tijuana T&A" album; if you want to put it there and you post it anywhere on the web, people will be able to see the name of the album if they are the least bit clever. That really messes up a marketing meeting, trust me. So keep church and state, dignity and nekkids, well seperate. Keep your dirty photos in a different album from your work ones.

Okay, so now that you've got albums, let us call them Church and State. And you want to put something in them. There are two ways to put pix in Photobucket: from your computer, and from a URL (ie just off the web somewhere).

To add pix that are already on your computer, go to the relevant folder, say Church. Open it up and you'll see…nothing there. Yet. But you'll see some option lines over on the right-hand side: choose whether it's Image or Video on the tabs, then it says Submit Multiple Pictures. You are only doing one right now, and that's the default, so just leave it. If you want to get fancy and add four or so at a time, you can. Just pick the number from the drop-down menu and it'll make lines so you can add each of them. If you miscount, no big deal; leave lines blank and it works just fine.

Then it says Add Images from URL. We're doing it from the compy right now, so we'll come back to this. Ignore it for now. There's a line for Image, and click Browse to locate it on your computer. Once you've selected it, it goes in the box. Name it if you like in the line below. As for the tickbox "Keep Original Image Names" that's entirely up to you. You can be witty with the names if you like, but only people who can read code will ever see them. Then click Submit and the pic should take a minute to load and Poof! You've got a picture in cyberspace.

Method two, adding images from URL, is the lazy person's way and by far my favorite. You find a pic you like on the web. You click on it to select it, yelling "hey computer, lookie here!" and the computer goes "huh? Oh, okay" and does. Then you right-click to get Properties, and when the Properties box pops up you see the URL there: copy it. If you can't right-click, I'm sure you know another way to get the properties (perhaps under File?). Now that you have the URL of the picture, you go to Photobucket as before, sign in, go to the relevant album (make sure you're INSIDE the album) in this case Church, and at the selection boxes click on the link that says "Add from URL". It will take a second to change over, but once it has it looks much the same, only without the "Browse" button. Paste the URL in the box and continue as before.

Okay, so one way or another you've got an image in your Photobucket account, in the folder named "Church." Kewl. Now what? Well, you'd like to get it to your WordPress blog, wouldn't you? Here's how:

Look at the album in Photobucket. You'll see, under each pic, three lines: URL, tag and img. For blogging, you need the URL, so copy it. This is the web address of that pic in your Photobucket account. Now, some of you are thinking, jeez, I went through all that when all I needed was the URL of the pic? I had that in the first place, so why did I go to Photobucket? You did that because linking directly to other peoples' photos steals their bandwidth, in some cases costing them quite a bit of money, thousands of dollars. Host your own photos at all times; it's only good netiquette. Besides, many sites ban hotlinking, as this is called, completely.

So you've copied the URL of your Photobucket photo. Now you go to your blog in either Write Post or Edit Post views(easiest if you keep your blog and your Photobucket album in separate windows or tabs, to click back and forth) and click more or less where you want the pic. Once the cursor is in place, click on the picture of the tree in the top toolbar; it's beside the link-related pix, fifth from the right. A box will pop up. There will be the familiar pause-and-screen-go-blank that WordPress does just to see if you're paying attention: wait it out, this is no cause for alarm. Just like with the link box, a box will pop up, but this is slightly different.

The URL for the pic goes in the top line, Image description shows up as a floater when people place their cursors over the image, so you can be witty with it if you feel up to it ("that tickles" has been done to death, though). Alignment is important. It's a bit buggy, and I find it easiest to use Left, Right, and Middle pretty much exclusively. Other than those, I dunno; when I learn more I shall tell you more about Absolute Top and Absolute Bottom and which of them is Lindsay Lohan and which of them is Prince, if you can't guess already.

Left and Right allow the text to go up against them; Middle occupies the middle of the column and the words continue below the image, rather than wrap around it. If you use Left and Right, you'll want to select either a Border (which is black) or a Horizontal Space so the text stays a certain distance away. Five pixels should do it, ten looks nice too. I don't worry about Vertical Space at all, as the lines keep things separate enough for me. Play around with it if you like, but you can leave Border and both Space boxes empty with no ill-effects.

You'll notice that Size is automatically filled in. If you want to change the size of your image, you can, but don't get too fancy or you might find that you've distorted things. Let's look at an example.

professor raincoaster

Here I am, and to put this in I selected Centered from the paragraph formatting section of the toolbar, the picture insert icon, pasted in the URL, hit Middle under Alignment, and hit Insert. I dunno why, but it sometimes doesn't put it in the middle unless you hit Center as well, so I always do both.

professor raincoasterHere I am again, only Left aligned, with no spaces. Looks a little cramped, don't it? Up at the top of this entry I chose 10 pixels of Horizontal Space, and that looks much better.

professor raincoasterAnd here I am again, Right aligned. Right aligned pix don't need so much space, because the text is left-aligned and generally leaves at least a bit of space on the right anyway.

Play around with these. I encourage you to post and edit at will. You can always edit something you've done, and I will make a quick note about that in the next lecture.

4 thoughts on “professor raincoaster’s little lectures: WordPress and Photobucket 103, putting in pictures

  1. Pingback: Uploading Images in « raincoaster media

  2. That was helpful, but every time I want to put a picture on the left of my about page it automatically moves the next paragraph underneath the picture. I don’t understand why that happens.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.