Genii Weblog

CoexEdit and importing local images - Bootstrapping a tutorial

Thu 8 Sep 2005, 10:40 AM

by Ben Langhinrichs
After a request from a user in the Genii Support Forum, I decided to build a tutorial to show people how to import local images from your hard drive into FCKEditor, assuming you have made the changes necessary in your database and have CoexEdit 1.1 loaded and running.  The exercise was made more interesting by the fact that I wrote the tutorial with all its steps in FCKEditor using CoexEdit, and used the techniques I was writing about to load the images.  Basically, at each step, I would start to do the step, take a screen print, clean it up and save it as a GIF file from MS Paint, then finish the process already underway and import the image.  This is a rough draft, but it is already a good start, I think.

Importing a Local Image into FCKEditor using CoexEdit (DRAFT)

Inserting an image from your local disk drive requires that you have the slight modifications which are present in the version of FCKEditor available from the Genii Software website.  The two modified files can also be downloaded from the 
CoexEdit downloads page if you already have FCKEditor 2.0 FC installed on your system.

This tutorial assumes you have the customizations in place, and have made the changes necessary to your database:

1) Start by create a table using the 
Inline GIF image icon.  We will make it 2 rows by 2 columns.  The Table Properties dialog should look like this:

Table properties dialog box

and the table created should look like this:




2) Now, place the cursor inside the first table cell and click on the Insert/Edit Image button, which looks like 
Inline GIF image.  If you have the Default toolbar, make sure you do not use the Image Button button, which looks very similar Inline GIF image but is slightly different.  If you are not sure, hold the mouse over the icon and it will say Image Button instead of Insert/Edit Image.  The Image Properties dialog should look like this:

Image properties dialog box

Look carefully in the upper right corner.  If there are two buttons, one of which says Browse Server and the other of which says Browse Local, you have the correct FCKEditor customizations.  If you only have a Browse Server button, you do not have the customizations.

3) Click on the Browse Local button.  This will bring up another dialog box, which should look like the following, although it may be larger:

Browse local images dialog box

4) Click on the Browse... button, and traverse the standard directory structure to find a local image.  The dialog should look something like this:

File picker dialog box

and after selecting an image, the 
Browse Local Images dialog would contain a path to the image.

5) Click the 
Upload button from that dialog, which will return you to the Image Properties  dialog.  Two important things should be noted here.  The first is that the URL shown in the Image Properties dialog will not be the local path, but instead will point to an uploaded image in your database.  This is a temporary image that will be removed once CoexEdit moves the image into an in-line image.  The second thing to note is that the image you uploaded will appear in the preview, but it may take a second or two.  It may appear briefly as a broken image before showing as a proper image.  This delay is the time the indexer in your database takes to index the image so it can be found.  The dialog should look something like this:

Image properties dialog box with preview

6) When the image is showing in the preview (and not before), click on the 
OK button and the image should appear in the table cell, like that below:




7) Continue adding images to other cells, as well as text and more.  These images will all point to temporary image files in your database until your save.  When you save, CoexEdit will convert these to in-line images and delete the temporary images.

Copyright 2005 Genii Software Ltd.

What has been said:

365.1. Doug Cohen
(09/08/2005 09:10 AM)

Can you please explain why you need to use the "Insert/Edit Image button" instead of the "Image Button".

I notice that there is an additional tab on the "Insert/Edit Image button" called Link. Is there other functionality differences?

365.2. Ben Langhinrichs
(09/08/2005 09:16 AM)

Good question. The answer is that Image Button is for creating a button with active content behind it, which is not really supported. In fact, if you look at my previous blog post Customizing the FCKEditor Toolbar, you will see that there is a whole set of icons (and matching functionality) which should be removed from FCKEditor before it is used with CoexEdit. This includes items like Insert Form, which clearly make no sense in the way CoexEdit is used. You folks should definitely consider using the smaller toolbar, as I think I have communicated via e-mail.

For what it is worth, CoexEdit might be able to handle adding an image buttom, which would then become a hotspot over an image in Notes. but I would recommend against supporting it, as so little of what you do with active content on the web translates well to the Notes client.

365.3. Doug Cohen
(09/08/2005 10:15 AM)

Thank you for the clarification. It makes perfect sense now.

We are planning to make use of a custom toolbar, but until you pointed it out, I never really noticed the differences in the functionality image buttons.