skip to content
.
logo picture logo text

Return to the Practice Menu

Adding an Image using Kompozer

Please note: This help file was originally written for The Studio. It is written as if you had downloaded a copy of Kompozer (It's free) and are using it to make an HTML page. This is an continuation of  "Introduction to Kompozer" so if you are just starting, you'll need to start there first!


Adding an image (your own website) | Adding an Image stored online | Special info for Eons

Adding an image to your own page or web site.

Gathering Pictures

First, gather the pictures you want to use and move them (or copies of them) to the same folder on your computer as your HTML file(s). Be sure it is a .jpg, .jpeg, .gif or .png.

Adding the picture

Open your  HTML file with Kompozer.

Put your cursor where you want to add the picture.

Click on the "image" icon next to the "link" icon in the top line of the Kompozer program.

A drop down list will appear that looks similar to the "link" drop down.

Image WindowPut one or a few words to name the picture in the "alternate text" box (where it has the blue radio button by "Alternate test"). We'll discuss why later.


Then, look up a little and find "Image Location". Click on the folder to the left of the box under "Image Location" This will open a popup for you to browse your computer. Go to the folder where you have stored your HTML file and your pictures.

Click on the name of the picture you want to use.

It will add the picture, but the text will be all at the bottom. Not to worry. The next step will fix that.

Fixing the image position on the page.

Double click on the picture you just added.The "image" drop down box will appear again. Note the four tabs at the top of the drop down box. Click on Appearance:


Appearance Drop down
Click on the "Align Text to Image" drop down box and it will drop down to give you choices. I clicked on "Wrap to the right" so that this picture would be on the left and the text to the right.


You can also put spacing around your picture, if you want, by using the boxes on the left.  I put a 5 in the "Left and Right box to give this picture a spacing on the left and right of 5 pixels. I could have chosen to have spacing at the top and bottom or to have a border by putting numbers in those boxes.


Notice under Image Preview. It tells you the pictures actual size.

You can click on the "Dimensions" tab at the top and change the size of how the picture shows on your page. However, this doesn't change the size of the actual picture and the time it takes you page to show up on someones browser won't change either. If you want a smaller picture, it would be better to resize the picture itself.


Play around with it a bit. As you make changes, you can look at the source and see how those changes are written in HTML. (Bottom left ---->Click on Source;  To return to normal view, click on normal)


Adding an image stored at photobucket, etc.

(These instructions are for images stored somewhere besides your computer - such as photobucket, etc.)

First, get the URL of your picture. If it is a picture stored on photobucket, then copy the direct link (It will start with http: and end with .jpg, .jpeg, or .gif).

Then, click on the "image" icon next to the "link" icon in the top line of the Kompozer program.

A drop down list will appear that looks similar to the "link" drop down.

Image Window

Paste the URL in the "image location" box




Put one or a few words to name the picture in the "alternate text" box








Click OK Now you have a picture on your page!

Fixing the position of the image on the page:

Double click on the picture and the image box appears again. Note the four tabs at the top of the drop down box. Click on the "Appearance tab" 


Appearance Drop down

 Click on the "Align Text to Image" drop down box and it will drop down to give you choices. I clicked on "Wrap to the right" so that this picture would be on the left and the text to the right.


You can also put spacing around your picture, if you want, by using the boxes on the left.  I put a 5 in the "Left and Right box to give this picture a spacing on the left and right of 5 pixels. I could have chosen to have spacing at the top and bottom or to have a border by putting numbers in those boxes.

Notice under Image Preview. It tells you the pictures actual size.

Play around with it a bit. As you make changes, you can look at the source and see how those changes are written in HTML. (Bottom left ---->Click on Source;  To return to normal view, click on normal)


Special Eons Info

Images in groups are stored in a different directory than the files. So, to have images on pages you intend to upload to the file section of an Eons group, upload your pictures to the picture section of the group. Then use the directions under the second part of these instructions - "Adding an image stored at Eons, photobucket, etc."




You can add more pictures the same way. However, remember that the more pictures you add, the longer it takes your web site to load!

Tip written for use on Eons, but could work on other sites that allow HTML in posts, PM's or on the profile page: You could use Kompozer for posts to the group or write PM's on Eons. When you are satisfied with what you have done in Kompozer, change to source view. Then copy what is between the body tags,   <body>   </body>  but not the body tags themselves. Paste the results in the message box on Eons. Preview and then Post.


Have Fun!