Adding Photos to your Blog

Let me take you through the steps (and pitfalls) of uploading a photo. The process is the same for posts as well as pages, and in my example I’m using a post. So first, we want to create a new post or edit an existing one. You’ll see something like this:


I’m going to insert my photo after the first paragraph, so I’ll position my cursor there on a new line. Regardless of where you’d like you picture to appear, position your cursor there. Could be anywhere within the post. You may have to insert an extra line (by hitting return, just like in a Word document).

Now let’s add a picture by clicking on the little box icon next to upload/insert:


The first one is meant to be a picture frame, the next one a video, followed by a note, and the last one is a generic thingymagic. Those are called the media upload buttons. You can use them whenever you have something to upload, like a PDF for example. But let’s focus on pictures for now.

Click the photo frame and a dialogue will appear like this one here:


Click the Select Files button and select a picture from your hard drive. I’m using a friendly dancing alien here – you dialogue will look something like this:

At the bottom of the window you’ll see a few image sizes you can select and ultimately insert into your post. This is a bit techie but very important:

My picture is fairly small (it’s only 320×480 pixels) so it can fit easily into a post without the need to be resized. But imagine you took a picture with your digital 10 megapixel camera – that’ll be over 2000×3000 pixels. Now your average computer monitor isn’t bit enough to display that. You could insert it anyway and have your theme resize it on the fly, but you’ll still deal with a huge file size of your picture (say over 2MB or more) which is frankly too much for photo on a website.

WordPress is quite clever and will create smaller versions of your picture while you upload it so you have a choice of how big a picture you want to insert. Here’s the bottom part of the dialogue I’m talking about:


See? Now you can choose if you’d like to insert a small, medium or large version of your picture – but you can still go for the original if suits your needs. I’d say stick to the medium size if you want text to flow around the picture, or choose large if you want to display the picture on its own.

Speaking of flowing text: notice the Alignment section in this dialogue. This tells your browser where to position the picture. It’s not as exact as in Word because your post is displayed in HTML, but you can tell WordPress here if you’d like to see your picture on the right hand side and have text surround it. Something else to play around with 😉

I’ll leave my picture settings as they are in the screenshot here and will only click Insert into Post to add my picture. Now this is what I see:


Now I’ll publish (or update) my post and the picture is inserted where I want it to be:

That’s how that works step by step, I hope it helps.There’s a lot more I could tell you about this upload dialogue and how you can use this with your posts – one of the screencasts on my website deals with How to write Pages and it demonstrates the process. Have a look here for all my screencasts: