1. What is the purpose of the picture?
2. Edit the photographs (resize your pictures)
3. Add photos to your post
4. Add a link (optional)
5. Save draft or update post

What is the purpose of the picture?

It makes your life much easier if you decide beforehand which pictures you’d like to add and where, and what the purpose of the picture will be, because that will determine its size. For instance,

• small pictures can be floated on the right/left hand side of your text (e.g. 75 to 150 pixels wide), or
• medium pictures that have a bigger impact, but are small enough to let the text float around it on the left or right hand side (e.g. 130 – 350 pixels wide)
• big pictures with no text on either side – the maximum width depends on how wide your text column is.

Edit the photographs (resize your pictures)

Depending on the purpose of the picture, resize your photograph accordingly (see point above) in your favourite photo editor like Photoshop, Paint, Picasa, VSO Image Resizer, …

Add the picture to your post

Once you’ve got the right size for your photo, add a new post or edit an existing post, then place your cursor at the beginning of where you’d like the top of the picture to start from.

• Click on the “Add an Image” next to Upload/Insert at the top of the post editor.
• Select “Browser Uploader” (you can use “Flash Uploader” but sometimes it’s a little wonky and then frustrating to work with).
• Find your photo and upload it.
• You’ll then see a small version of it and the name of the photo will automatically appear.
• Change the Alt text to be something recongnisable (this appears when someone hovers their mouse over the picture).
• Add a caption that should appear underneath the photo (optional)
• Select the alignment for the photo, with respect to the text immediately after the photograph.
• * “Left” will make the text flow around the right side of the photo, good for smaller photos / thumbnails
• * “Right” will make the text flow around the left side of the photo, good for smaller photos / thumbnails
• * “None” will left-align the photograph, good for larger photos
• * “Center” will place the photo in the centre of your text, good for larger photos
• Then select full size
• Click on Insert into Post
• Click on “Save Draft” or “Update Post”

Because you’ve already made your picture the right size, you can select Full Size. Remeber it’s better not to add large photos, because they gobble up the disk space of the website and slow down the loading/viewing time for people reading your posts. Your photo should appear where your cursor was before you clicked on “Add an Image”.

Add a link to your photo

Firstly, go to the target website page that you’d like to link to – this can be on your website or on another website. Then copy the URL (http://…) and go back to your post and click on the photograph to which you’d like to add the link.

The easiest way to add a link to a picture is the same way for adding a link to text i.e. once the picture (or words) are selected, click on the link button at the top that looks like little links in a chain.

A little window will pop up, where you can paste the URL into. Then if the website is external i.e. not your own, select the target as “Open in new window”. Otherwise you can leave this option as “Target not Set”. Click on Insert.

Remember to save your post and check that your photo(s) are loading properly and any links that you’ve added are working properly.

Pre-emptive Troubleshooting …

If you need to move the photo to a different place, you can just click and drag it, but this doesn’t always work as well as it should! Because the html codes sometimes get all mixed up, I find it much easier just to delete the photo and insert it again into the right spot.

This time you can select “Media Gallery” instead of uploading the photo again from your computer, unless of course if you’d like to change the photo altogether!

When you copy any text and paste it into your WordPress page or post, it’s most likely that the underlying style codes will be copied too. These codes will override the style sheet that is set out in your web design and show each article with different fonts, colours and sizes. This could also happen when you copy and paste text from e-mails (or other sources). 

So what if it’s completely different? Will the sky fall on my head?

Perhaps. Perhaps not.

Personally I prefer the information I’m reading to look uniform and neat, but then I’m rather pedantic. Other people might enjoy reading posts that look different to each other, with a mish-mash of fonts, colours and text sizes.

It could come across as being free-minded and fun-loving, but it could also be (mis)interpreted as being scatter-brained and that you’ve lost sight of the ball. Hmm.

Hang on a mo’ … before you get the wrong idea – I am not saying that your writing should be boring or not show any imagination! It’s just better if the styling is done in a uniform way and with purpose. Take a look at How to Style Your Text to get great looking website pages.

So how do I copy and paste text without the underlying codes?

In the text document or e-mail, highlight the text that you’d like to use in your article. Press <Ctrl+C> to copy the text to your computer’s clipboard. Then instead of pasting it directly into WordPress, you need to make a quick detour.

In Vista, go to the Windows Start button, All Programs, Accessories and choose Notepad (you can normally find Accessories quite easily in the other versions of Windows).

Then you’ll get a blank screen in Notepad. Press <Ctrl+V> to paste the text. You’ll see the text appear in the blank window. Then, to make sure you’ve selected everything, press <Ctrl+A> to select all. Press <Ctrl+C> to copy it again.

Now go to your WordPress post (or page) and place your cursor (left-click with your mouse) in the spot where you’d like to insert the text. Then press <Ctrl+V> to paste it. Voila!

Your text has been copied without any underlying codes. Now you can style the text to suit your website.

Hang on a minute … there were pictures too, but now they’re gone!

Okay, you’re on to me.

Notepad is a basic text editor and doesn’t know what to do with pictures. You on the other hand are bright and intelligent and can insert an image yourself through WordPress.

Or it might work if you copy the picture itself and paste it into the right spot.

Might … what kind of training is this?

The path of the image plays a role in whether it will appear in your post or not. Sometimes the route to the pictures can’t be found, then instead, you’ll see that dreaded white box with a little red X, which should rather say, “Sorry, would you mind trying something else?’ in a friendlier tone, don’t you think?

Tip: consider the size of the picture in relation to the width of your text column. You might receive a lovely big photograph by e-mail, but if you to try to squeeze it into a narrow column of text, it could just fall off the side and only show half the picture. Refer to How to add a picture for further details.