This is a tutorial on how to use some of the basic functions relating to placing images within a content managed webpage.

If you are not familiar with the basic features of FCK editor, see our previous tutorial.

Adding Images using FCK Editor

Click on the Add an image icon – this box appears:

Insert image button in FCK Editor

Taking you through the tabs across the top of the image properties box, there is:

Image property box in FCK Editor

Image info
This tab allows you to browse the server your website resides upon for images that have been loaded – as per above screen

Link
Allows you to make the selected image into a Link – with the ability to target where the link opens (leave alone for normal behaviour, set to “blank” if you want the linked to resource to open in a new window)

Image property options in FCK Editor

Upload
Allows you to search your computers hard drive for images to upload to the server.
Once loaded into the server you can resize the image via the “Image info” tab

Advanced
Not as advanced as you would think! Add descriptive alt text to your image. Alt text is read by screenreaders – describe the image here, so that viewers using screen readers know what is on the page.

Manipulating an image on the page

When you click the browse server button, pop up appears displaying all available images on the server

FCK Editor resource browser

Clicking on an image will load it into the preview box:

Image property box

The preview box allows you to manipulate the image. You can set the following parameters:

• Width and Height of image
• Give Image a border – see slide – has 5 pixel black border
• Place the image in a fixed position thru a combination of the Hspace ( Horizontal spacing), Vsapce (Vertical spacing) and the align drop down tab.
• The Align tab allows you to fix the image in many different places on the page.
• The example shown is for the image to appear in the absolute Middle of the page.

Uploading images from your computer

Clicking on the Browse button will produce a windows “file upload” pop up.

Upload dialogue box

Navigate to the location of your images, click on selected image to highlight then click on “Open”

This will fill in the file extension box:

Image property box

Click on send it to the server button

Image successfully uploaded in FCK Edit

Clicking OK will take you to the Image Info tab with the relevant image in the preview pane:

Change image settings in FCKEditor

From here you can resize and determine where on the page the image will appear.
This concludes the FCK editor upload image tutorial from Mutiny Design.