How to use TinyMCE’s Image Manager

TinyMCE is a great little what-you-see-is-what-you-get (WYSIWYG) website content editor that comes with an optional image manager. The image manager makes it easy to upload images from your hard drive to your hosting server without your having to bother with FTP. If you do use FTP to upload your images, you can still follow the directions in this tutorial for the first few steps.

STEP 1: INSERT IMAGE
To add an image to your content, position your cursor where you want the image to go and then click the Insert/Edit Image icon, which in the picture below has the red arrow pointing at it. The location of this icon in relation to the other icons in the toolbar will be different depending on your installation of TinyMCE, but it will always be the same tree icon:

Once you click it, a window will popup that looks like this (minus the green arrow):

If you have already uploaded your image to your hosting server using FTP software and know what its location is, you can enter that in the Image URL field. For example, something like http://www.mywebsite.com/images/myimage.jpg, then skip to Step 5.

If you want to use Image Manager at this point, you would click the icon that the green arrow is pointing to in the picture above.

STEP 2: IMAGE MANAGER
Another window (the Image Manager) pops up. It displays all the images that are already uploaded to your website, which may well be none when you’re first starting out. To upload an image from your hard drive, click the Upload icon, which in the picture below has a red arrow pointing to it:

STEP 3: BROWSE FOR THE FILE
Yet another popup window, as shown below. Click the Browse button and navigate to the image on your hard drive. Be sure it’s a valid .gif or .jpg or .png format image. Be sure the file name is composed of only letters and numbers. No spaces in the file name!

Once you have browsed for the file, click the Upload button. If you want to upload another file, click Browse and Upload again for as many files as you like. When you’re done, click the X button at the top right of the window.

Now you’re back in Image Manager, and you can see that your image(s) have been uploaded. If you can’t, then your Image Manager is not correctly configured, and you should contact your web designer.

STEP 4: SELECT IMAGE
The next step is to choose the image you want to place in your content by clicking on the selector for that image as shown by the red arrow in the picture below:

Then click the Insert link as shown by the green arrow. As you can see, you could also Delete unwanted images pretty easily. (Also notice the Edit option. Clicking this will allow you to crop, resize, flip, or rotate your image. Be sure to Save any changes if you want to keep them.)

STEP 5: IMAGE ATTRIBUTES
Once you insert the image, you’ll be back in this screen:

1. The Image URL field will be filled in for you.
2. For Image description, put in a short description (just a few words) of what this image is, or leave blank if the image defies description.
3. The Alignment defaults to Not set. You will probably want to change this to either Left or Right.
4. The Dimensions should already be set for you, though you can also change them. Note that if you change them away from the actual pixel dimensions of your image, the image may look squashed or rough when viewed in a browser. Try to do any image resizing within the Image Manager’s Edit option or by using some kind of graphics software on the original image rather than by changing the numbers in this window.
5. For Border, you can leave it blank, or enter a number which corresponds to the pixel thickness of the border. 1 (one) is a good choice.
6. For Vertical space, enter a number that corresponds to the number of blank space pixels that you want the image to have between itself and any surrounding text. 15 is a good number.
7. For Horizontal space, 15 is a good number.

Click Insert and if everything has gone correctly, you should see your image within the WYSIWYG editor. If you want to change any settings, click the image to select it, then go back to step 1.

Written November 9, 2007 on 2:04 am in category(s):
Helpful Hints, Visual Design | Comments Off