Professional and Affordable Web Design

0800 080 5401

Using FCK editor with images

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 EditorInsert 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 EditorImage 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 EditorImage 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 browserFCK Editor resource browser

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

Image property boxImage 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 boxUpload 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 boxImage property box

Click on send it to the server button

Image successfully uploaded in FCK EditImage 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 FCKEditorChange 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.

Comments3 Comments

Mahmood Ali

Great! Can it be possible in show images from other server. I am using fckeditor with php. For example I want to show images from 'Insert/Edit Image' from http:s3.mahmood.amazan/baby_pics/ (for example). What we will be here?

22 June 2009

Joe

is it possible to specify a title for the image?

30 July 2009

Ulrich Ferner

I just found this article concerning implementing pics with FCKeditor. Until a while ago this worked well, like described above; but now I get a message, saying: The server didn't reply with a proper XML data. Please check your configuration. What to do now?? Thanks in advance Ulrich Ferner

20 February 2010

All comments are moderated for spam and will not be shown. All genuine comments wil be show, however the links will be based on a NO FOLLOW RULE. Repeat commenters adding value to the articles and discusions will have removed alowing Follow Rule to Work.

Make a Comment

Notify me when someone responds

Quick Contact

See Full Portfolio Some Of Our Work

Screenshot of dsbs.co.uk website
dsbs.co.uk

Driving Schools Booking Service (DSBS) is a network of driving instructors, covering the whole of the UK. For this project, we were...

Screenshot of countysecurity.co.uk website
countysecurity.co.uk

County Security is a fully featured E - commerce solution, with an integrated "system configurator", which allows users to choose...

Customer News & Resources

At Mutiny Design we are constantly gathering together articles and help guides to assist our clients.

Introduction to sitemap.xml

Checking for a sitemap A site map (or sitemap) is a list of pages of a web site accessible to crawlers or users. It can be either a document in any form used as a planning tool for web design, or a web page that lists the pages on a web site, Some developers feel that site index is a more appropriately used term to relay page function, web visitors are used to seeing each term and generally associate both as one and the same. However, a site index is often an A-Z index that provides access to content, while a site map provides a general... Read More »

Center a web page in CSS

One simple way to center a web page using CSS is to create a container div, that is horizontally centered by having its left and right margins set to auto. Using this method, you can still apply colours / background images to the body tag, so its a flexible solution. (if you didnt need this ability, just apply margins and width to the body tag instead, and forget using the container div). The container div has the same width as your webpage and, well, contains it. All the code for your web page is placed inside the container div. This will... Read More »

-