HOWTO: Upload Photos To WordPress 2.5
Update: WordPress has a screencast of posting an image. It doesn’t cover as much as here, but it’s quicker than reading all this. Try it first.
Update 2: Try updating Flash, Shockwave Player, and Java. Click here to test Flash/Shockwave. Click here for Flash and Shockwave download page (buttons upper right of screen). Here to test Java (it will ask to update if your version is not the latest). Some people have had success trying different browsers as a temporary workaround. Click here for the Safari for Windows/Mac download page. Click here for the Firefox 2 download page.
Update 3: A tip for Firefox users who sometimes cannot scroll down in a dialog. Hold the CTRL key and hit – (the minus sign). This will shrink the content of the dlalog box. If you know where the Insert into Post button is, it can then be clicked. Afterwards, don’t forget to hold CTRL and hit + (the plus sign) to enlarge everything back to normal!
Update 4: After applying any updates mentioned above in Update 2, log out of WordPress, clear your browser cache, close your browser, and reboot your computer. Sometimes a reboot is necessary for the updates to function properly. Also, if any of the popup windows for uploading don’t display properly (turn white), right click and in the popup contextual menu, do Reload or Refresh.
Update 6: WordPress has since added a Browser Upload option. This was not available at the time I made the screensnaps below. That option will appear in this screen as a link (not a button) to click on. Since everything works fine for me, I haven’t personally tried that option. Also, I don’t plan to update this post with new screensnaps.
Update 7: Some hebephrenic in the WordPress bunker molested the Media Library code on April 20th. “Full size” no longer works as it did. It now implants a dimension in the HTML code. Although my theme can accommodate 450-pixel wide images, I scale everything on the PC side to 440-pixels. But now when I choose “Full size,” the HTML code explicitly specifies the image to be 400-pixels wide. This is absolutely stupid. BlogDesk, which isn’t a WordPress product, knows the width of my theme. Why the hell can’t WordPress’s own code do that too? WordPress now wants us to dick around manually moving image anchors. I suggest they instead put one of those anchors around the neck of the eejit who changed the code and drop him in the Pacific!
Update 8: It turns out the change in the image HTML code noted above in Update 7 was a bug. WordPress fixed it within 24 hours. Although dimensions are still implanted in the HTML code, in my case at least, the dimensions are now correct. I really wish WordPress had a method of communicating such things to all of us. I would have shut up about it for at least a day. That’s because, in general, WordPress has been fixing things within 24 hours.
I could no longer stand watching the suffering on the WordPress Support forums of people confused by the new method to upload images. So I’ve put together this quick tutorial to show how it works.
Note that I will not be covering every aspect. I am simply showing how I personally post photos when I use WordPress. I tend not to use descriptions or captions, so those steps will not be included.
All of these photos are clickable for actual-size view!
Choose Write->Posts to get the post entry screen:
In this example, I will be using the HTML editor, see the tab highlighted in red at the far right:
To the left of that is an area called Add media with four icons, highlighted here in red:
Here it is larger:
Highlighted in red:
Those icons, from left to right are: Add an Image, Add Video, Add Audio, Add Media. I’ll be demonstrating only the first one, which has a label that appears if you hover your pointer over it:
Clicking on that should bring up a popup dialog box like this:
I’ve already highlighted in red the Choose files to upload button. This method is to upload from your computer’s hard drive. I don’t use services such as Photobucket or Flickr, so I won’t be covering how to do that. Click that button and your desktop’s file selector will appear:
Navigate to the image you want as you have in the past. Note that WordPress 2.5 now allows multiple uploads! You can Shift-Click on a group to upload all at once! Here, I will just demonstrate a single photo. Once it’s been selected, WordPress will display this progress indicator (which I’ve already highlighted in red):
Then the uploaded image will appear in a dialog box. This is the upper part of that dialog box. Notice the three tabs at the top: Choose File, Gallery, Media Library.
This is the lower part of that dialog box. I will illustrate my own method for using a photo.
But first let me point out what I believe to be a bug! After an image is uploaded, it should appear in the Gallery. Here, below, you can see that it clearly does not! It worked correctly for me last night. So clearly WordPress still needs to squash some bugs!
Another way to see it is to use the third tab, Media Library. This is, as the name indicates, where all uploads you have done are stored. Here you can see the photo I just uploaded highlighted in red:
Clicking on that will display a dialog very similar to the original one when the upload completed:
Now we get to the point of actually getting a photo ready to post. The first thing to consider is if your photo is to be clickable (as the images here are). I tend not to do that with my own photos because I custom crop them to 440-pixels wide first on my PC. So there’s no real need for people to click on them. To make them unclickable, use the button I’ve highlighted in red:
Pressing that will make its URL go away, like so:
Next, there are these items to consider:
Click on the item that corresponds to the desired alignment. Then choose the desired size. If you want to see what the different size options do, see this post I did earlier where I tested them.
Once all of that is set, click on the Insert into Post button, which I’ve highlighted in red:
The photo is now in the post, here as HTML code:
And below is that photo. Remember that I got rid of its URL, so it’s not clickable. It’s set as Medium size:
I hope this has helped some people! I’m not allowing Comments for this post because I’m not WordPress Support. I’m also not going to be at my desktop all evening. Please comment back at the WordPress Support forum thread that brought you here! You’ll find other helpful people there — ones who are genuine experts at this!