Image preparation

While it is possible (and easy) to re-size images from within WordPress, it is always best to size then appropriately prior to uploading them. There are two parts to this process:

• Setting the resolution to 96dpi (depending on the image’s source it could be up to 300 dpi, which would result in a very large file that would be slow to download)
• Setting the physical dimensions (width x height) in pixels. There can be a bit of trial and error with this one depending on the available width of the content area of the page or post.  I suggest you start by setting the width to 250px. In most image resizing applications the height will adjust automatically to suit.
• If you don’t have an image re-sizing application have a look at Fotosizer. This is a great little application that lets you resize multiple images at a time.

Image Upload / Insertion

• Open the page or post you would like to add the image to.
• Click at the start of the paragraph you would like to associate the image with.
  • You will see that you can either align the image to the left, with the text flowing around it on the right, or vice versa.
• Just above the row of editor icons there is a lable “Upload/Insert” – click the square icon immediately to the right of this lable. Notice that if you hover your mouse over it, it says “Insert an image”
• The popup window defaults to the screen required to upload an image from your computer. This is the normal situation. Click the “Select Files” button, browse to the folder on your computer that has the required image, and upload it.
• A thumbnail of the image will be displayed, along with fields to complete as follows:
  • Enter a meaningful title
  • Set the Link URL to “None” unless you would like the image to be clickable, in which case you can enter the target address
  • Set alignment to “Left” or “Right” as required.
  • If you have sized the image appropriately prior to upload you can leave the size to the default “Full size”
  • Click “Insert into post”
• The image will now be displayed in your post. Often you may like to create some whitespace around the image so that the text does not appear to be crowding it. If that is the case do this:
  • Click on the image, then click the edit icon.
• In the pop up window click on the Advanced Settings Tab
  • Next to the “Image Properties” line set Vertical Space to 10 and Horizontal Space to 10. You can experiment with these values.
  • Note that you can also add a border if required. Try entering a width of 2.

That’s it!

If you have come this far you have done well. It seems like a lot of little steps when described in detail like this, but it will soon be second nature. Happy blogging

Was this post useful? Feel free to add a comment.

• If you prefer the software to be installed on your PC try www.paint.net (and click on the ‘get paint’ link).
• If you prefer to use an online service  try www.pixlr.com (and click the ‘Jump in’ button).

Both of these are terrific editors that are more than up to the task.

Rollover images require two images for operation, one that shows the normal state when a mouse is not hovering over the image, and one that shows the image when it is. The following two images are a typical example.

The effect is set up so that the image normally appears as it does on the left, changing to the one on the right when the mouse is rolled over it. Because the images are identical, it will appear as if it is just the text that is changing colour, or ‘highlighting’.

To achieve this with FCKeditor first upload the two required images to your images directory, then open the page you want to edit in the FCKeditor and click the ‘Source’ button in the toolbar. Scroll down to where you want to insert the code and paste the following (after reading the note below):

<img title="Buy Now" 
onmouseover="this.src='http://www.yourdomain.com.au/order_over.png';"
onmouseout="this.src='http://www.yourdomain.com.au/order.png';" 
src="http://www.yourdomain.com.au/order.png" 
alt="buy now" width="120" height="31" />

In this example the normal image is ‘order.png’ and the hover (mouse over) image is ‘order_over.png’.

When using this code remember to edit it with your own domain name, image names and image directory path.

Finally it is normally the case that the button is to be linked. In this case you must simple add the appropriate anchor tags around the above code. e.g.

<a href="order.php">
<img title="Buy Now" 
onmouseover="this.src='http://www.yourdomain.com.au/order_over.png';"
onmouseout="this.src='http://www.yourdomain.com.au/order.png';" 
src="http://www.yourdomain.com.au/order.png" 
alt="buy now" width="120" height="31" />
</a>

NOTE: I have added line breaks in the above code to make it easier to read in this post. These should be removed before pasting the code into your editor. In other words the code from <a href=“order.php”> … to … </a> should be on a single line.

.

Step 1

• Insert the first (small) image in the usual way.

Step 2 - link the first image to the pop-up image

• Select the small image and click the [link] editor icon.
• Click the [Pop-up] tab and check the ‘Javascript Pop-up’ box.
• For the ‘Pop-up Url’ field browse and select the (large) image that you want to display in the popup window.
• Allocate a ‘Window name’ (can be anything)
• ‘Size’ is the size of the pop-up window – make it about 40px larger than the large image.
• Enter c in both ‘Position’ boxes
• Leave the ‘Options’ as default
• Update

Test by displaying the page and clicking on the image. The larger or alternative image should popup in its own window.