I have a slightly dated article back here that has some information relevant to processing your pictures before putting them on your website. Seven months later, I’ve decided to go ahead and actually write the Part 2 to all that – working with images in WordPress!
Let it be known, however, that I only endorse their editing tools for smaller jobs and easily updating your previously uploaded images should your sizing requirements change. It’s easier and far more efficient to edit lots of pictures offline then upload!
On to the Finale!
Well, the last for the time being at least. Heh.
First, make sure your cursor is where you want the image to ‘pop up.’ If you have the cursor in the middle of a sentence and insert an image, that image will show up smack dab in the middle of that sentence, chopping it up who knows what kind of way. Once you’re set where you want to be, pressing the Add an Image button up there by Upload/Insert brings a dialog box much like the one below except blank at the bottom. Notice the tabs at the top. To save myself some space, we’re going to pretend that I pressed the Select button, chose my picture, and it uploaded successfully.
1 – From Computer
WP makes it EZ: You can choose multiple files easily (if you have them and want to) and have them all upload at once. To select all the pictures (say, 1 through 10) use Ctrl+A; select pictures 2 through 5 by clicking on 2, holding down shift, and clicking on 5; OR select by holding down Ctrl and click to choose 1, 3, and 9. If you do upload multiples, you will have a rather small listing of the pictures and clicking ‘Show’ next to each one will get you to all the options. I’m about to cover.
2 – The image thumbnail.
The image thumbnail – and the image as a whole – can be edited via number 3, the Edit button. Assuming you haven’t already processed your images, pressing that will give you this (sliding it in just above all the stuff I showed above):
The absolute first thing to check out here is j/k – Thumbnail Settings – down on the bottom right. J shows your current thumbnail and k gives you the options to edit all the image sizes (more on those in a few), just the thumbnail, or everything but the thumbnail. If you’ve done your processing, the only thing you’re likely to want to edit is the thumbnail so make sure that option is selected. Take care with the other two!
a/i – There are a few ways to go about cropping (cutting up) an image, should you be so inclined. The easiest is to click and drag across the left hand picture to make a box outline. Doing this makes numbers start scrolling in the selection box (i) off to the right. A more specific approach is to type the numbers into that box directly after you start your click/drag box. This is handy if you know exactly what you want the final size to be. Another method is to use aspect ratio. As examples for the aspect ratio: same-number ratios (1:1, 2:2, etc) create boxes, 4:3 is a slight rectangle, much like older television sets, and 16:9 is a flatter rectangle that would be shaped like a hi-def plasma screen. Once you have your box how you want it, selecting the crop button (a) will apply the change.
b and c rotate your images left and right while e and f flip the whole image vertically (upside down) or horizontally (left to right). I always have trouble remembering which is which. LOL
f and g let you undo and redo any edits you make until you hit the Save button. (Then you’re stuck. 
)
h – Scale Image – Where crop cuts portions of the picture out, scaling makes the entire image bigger or smaller, depending on what you tell it to do. Just set your desired size on either the height or width (WordPress adjusts the other automatically so it stays in proportion) and hit Scale.
L would have been the Save and Cancel buttons had I remembered. Don’t forget to save before you scroll down to fill in the information for the image!
Now going back to my first screenshot…
4 and 5 can, realistically, be the same thing. I changed 4 to ‘WordPress Add an Image Dialog’ then copied and pasted it into 5. They deal with the ‘web’ stuff – accessibility and SEO, mainly. As usual: use keywords and be descriptive but concise.
6 and 7 are more for WordPress. Depending on your theme settings both the caption and description can/might be displayed. 6 is more likely to be displayed and can be the same as 4 and 5, if you like. And you can use 7 for a more detailed description of what’s in the image. Like, say…hmmm…an album or t-shirt description.
8 relates to what happens if an image is clicked on. If I wanted my examples to point to WordPress, I’d type in wordpress.org. Selecting File URL will point to the image on an otherwise blank page – handy for when you have an image that is larger than your theme will fit and you want readers to be able to see the full size. Selecting Post URL will send the clicker to the post where that image appeared (if there is one). Selecting None will make it so the image isn’t clickable, which might be preferred if there’s no good reason to link somewhere else.
9, Alignment, is pretty self explanatory. Floats left or right or centered. Whichever tickles your fancy!
10 lets you chose the size of the image when it goes into your post but comes with an aside:
The reason you’re given 4 options is because WordPress automatically generates different sizes of your images. The benefit to this comes in if you’re making use of the Gallery (more on that in a few) or want to have different sizes on hand to display in different areas. This means that for any one image, it’s possible to have up to 3 other smaller sizes. It also means that you can have 4 versions of the same image taking up space on your server. Depending on your host and how many images you have (or plan to have), this could mean serious hits to both your server space and/or the number of files you’re allowed to host on the server.
If you want to disable this auto-generation for one (or all) of the sizes – and you have the proper privileges – you can change the settings in the left menu under Settings -> Media. There (under Image Sizes) you will see the sizes set for each image and can change them according to your needs. Setting one or all to 0 will disable the generation, saving you the space.
11 will insert that image into a post (remember your cursor placement!) and right beside that, we have delete (that will confirm your decision to trash it so no worries there). If all you have (or want to show) is that image, that’s where you’d stop and go on about your business.
But just so you can see, here’s what WordPress puts out:
<a href="http://poisondesigns.authenticvisionllc.com/files/2011/05/edit-img-diag.jpg"><img src="http://poisondesigns.authenticvisionllc.com/files/2011/05/edit-img-diag.jpg" alt="Wordpress Edit Image Dialog" title="Wordpress Edit Image Dialog" width="532" height="505" class="aligncenter size-full wp-image-2383" /></a>
Looks pretty complicated, right? Aren’t you glad you didn’t have to type all that? Get used to seeing it though.
And, just so you know, a good way to adjust images on the fly (after they’ve been inserted and you don’t want to go back into gallery for one tiny fix), you can simply edit the height and width right in the code. If you wanted to adjust the width, the best way to go would be to delete height="505" and replace the 532 in width to whatever you want it to be (say, 500). To do height, you would want to delete the width. Doing it this way keeps your images from stretching all sorts of funny ways.
If you uploaded more than one picture and you’ve made it this far, you can scroll to the top of the dialog and push the ‘Hide’ link to close it then scroll allllll the way to the bottom (if you need to) and hit ‘Save All Changes’ – my unmarked 12. Don’t fall into the trap I do and think you can edit multiple images and not get tripped up – it happens to the best of us. Save often!
Doing this will take you to your Media Gallery tab (up by number 1). The gallery is pretty cool. Check it out:
It looks pretty much like the short list I mentioned. You can edit the rest of the pictures here, same way I just outlined (show/hide). I’m just going to play with the Gallery Settings while you do that!
u – There are no numbers in the boxes at first but you can put them there to arrange the images how you like. Mine were backwards and my OCD just can’t have that so there ya have it.
v – Once again – links the image to either the blank white page mentioned above or an attachment page. An attachment page might be styled slightly different, depending on your theme but for the most part, it will likely look like another page in your website with just the image on it.
w – Order by – This drop-down gives you 4 options: Menu Order (how they’re ordered in v), Title (to the left of v), Date/Time (obvious, I hope), and Random. Random is good for large galleries. While you might have 50+ thumbs on a page, the content seems to be ‘new’ each time a visitor comes so they’re maybe they’ll see a picture they might have missed on the previous visit.
x – Order – Which way w will count – up or down, forward or backward, etc…
y – the number of columns you want the thumbnails to display in. Since I only have three, that’s all I need and hitting ‘Insert Gallery’ (z, at long last!) will give you this:
Wanna know what’s real funny? All you’ll see is in Geek (unless you’re lookin at the source code) is [gallery]. Ain’t it grand?!
Two more things real quick:
The Gallery tab relates to the post you’re working in. The Media Library is all the images on your website and looks like the Gallery tab, save the filtering and search abilities.
The From URL tab is a way more tricked out version of the img button I mentioned the other day. If you you’re reading this and can’t figure out what it all means, I don’t know what to tell ya beyond scroll up! LOL
For surviving this crash course, I here by dub thee a productive member of the WordPress society. Now if you’ll excuse me, I have a hot date lined up for the weekend and I have got to get some of this school BS knocked out.
