You are reading this tutorial because you have a website powered by the Joomla! content management system. Congratulations!  Joomla! is one of the best ways to run a website. It is dynamic and expandable, with a huge community of developers and users (see http://www.joomla.org for more info.)

Click here to download this tutorial.
 
This tutorial assumes that you know how to upload pictures into your Joomla! website. Pictures must first be uploaded into the media manager before you can insert them into your content items. For information on how to do that, please, read the "Uploading Pictures " tutorial.

This tutorial also assumes that the JCE editor has been installed into your website. The JCE editor is a wonderful free content editor that is available to download at http://www.cellardoor.za.net/ As always, make sure you are using the Firefox web browser to access your Joomla! administration.

We start our tutorial on the home page of the administrator back end of your web site. On the administration navigation bar, hover over "Content Items." Then select "All Content Items" from the drop down list:  

This will bring you to the Content Manager. From here, click on the title of the Content item you wish to edit, or click on "New" to create a new content item. In this tutorial we will be creating a new document called "Japanese Trees"

You should now be on the content editor screen. We have entered some sample text into the intro text area (remember that you can cut and paste text from a text file into your editor's text area):

Now we will insert the picture of the bonsai tree that we uploaded into the media manager in the "Uploading Pictures" tutorial. First we will move the cursor in the intro text area to where we think we want the picture.

When we have done this, we click on the insert image icon on the WYSIWYG editor panel:

This bring up the image manager pop up screen:

In the bottom left panel of this screen, notice that there are some files and folders. These are all the files and folders that reside inside the "stories" folder in the media manager. To select the bonsai tree, we click on the "trees" folder and then on the "bonsaismall.jpg" file itself.

You should now be able to see the image in the bottom right window. In the top window, you can set the description and the title of the image. This information is for accessibility, so that the image can be read by browsers for people with visual impairments.

Now click on the appearance tab, in the top part of the pop up window:

The appearance tab has a series of options that affect how the image is displayed. Margins Around ImageIf you want to have a margin of white space around your image, for best results, enter "0" in the Vspace and Hspace.

Then enter the following into the "Styles" input box:margin: 0px 0px 0px 0px

This will give the image a margin of 0px around it.

To add space, replace each "0" with a number. For example, If a 5 pixel margin around the image is desired, then ‘I would enter the following into the "style" input box:

margin: 5px 5px 5px 5px

(Each number represents one "side" of the image as follows:

margin: (top)px (right)px (bottom)px (left)px)

When you have finished entering information about the image appearance, click "insert" in the bottom right corner of the pop up window. Your image should now appear inserted into the content:

*Note: play and experiment with inserting images. Notice that if you click and drag an image that you have inserted in the text area, the cursor will appear and you will be able to move the spot where your picture is inserted. Also, know that you can gain more control of your layout by putting your text and images into tables. For the more adventurous, consider learning Cascading Style Sheets (CSS,) as that is the best method for aligning images in a document.

This concludes out tutorial on how to insert images into content items. We hope it is useful to you. Should you have any questions, please don't hesitate to call or email Floating World Web Development.