Overview

• How to Insert an Image into an Article
• How to Upload an Image
• Additional Tips on Combining Image and Text
• Making Lightbox Images
• Technical Notes

How to Insert an Image into an Article

1. In the article editing interface, place the cursor where you want the image to be inserted.
2. Invoke the Image Manage by clicking the Insert/Edit image button in the text editor:·. ·This will load the Image Manager shown in Figure 1.
3. Click on a folder in the Folders list (Figure 1-D). If you want to create additional folders, you can do so using the New Folder button (Figure 1-G).
4. Select the desired image from the file list in the middle column (Figure 1-E). A preview of the image will automatically appear in the details pane to the right. ·The URL for the image will automatically be placed in the URL field (Figure 1-A). If the image you want has not been uploaded yet, see the uploading section below.
5. Enter a descriptive name in the Alternate Text field (Figure 1-B). For example, a picture of the kitchen table might say “Kitchen table”. This text will appear in the mouseover text on normal browsers. ·It also helps with visually impaired users and search engines.
6. With the other fields, you can also adjust other parameters (Figure 1-C):
   • dimensions·- in general, you should not modify these values. ·Instead, upload an image that is the size you want to use
   • alignment - top, middle, and bottom control how an image aligns with the text around it. right and left controls the image's horizontal placement
   • clearing - setting left will prevent anything from appearing to the left of the image. ·Some for right and both. ·Set to none·to allow the image to be placed in-line with text.
   • margin - sets empty space around the·image
   • border width and color - the default is for images to have no border. ·However, if you include an image inside a hyperlink, the image will have a border by default. ·Set the border width to 0 to remove this image.
7. Click the Insert button (Figure 6, #7) to insert the selected image.

Figure 1: ·Image Manager Interface

How to Upload an Image

1. In the Image Manager, select a folder as the upload destination from the Folder list (Figure 1-D).·
2. Click the Upload button (Figure 1-F). ·This will show the upload dialog pictured in Figure 2.
3. Click the Add button, which will let you select an image from your hard drive. Each ·image you selected will appear in the queue. You can select as many images as you want.
4. When all the files you want to upload are in the queue, click the Upload button. Each image will be uploaded. After an image has been uploaded, a green check mark will appear next to it. (This step might take a few minutes depending on how many images you have selected and how large the files are)
5. When all the files have a green check mark next to them (be sure to scroll down if the queue is longer than what is visible), click the Close button. All the images you uploaded will appear in the file list (Figure 1-E).

Figure 2: ·Upload dialog

Additional tips on combining images and text

It can sometimes be challenging to get an image positioned correctly with respect to the text on page.·Here are a few tips for adjusting image layouts:

• To put an image by itself (with no text above or below it), insert it into an empty paragraph.
• You can adjust the image’s position by changing the paragraph justification to left, center, or right.
• To put an image next to a paragraph of text, you can try setting the alignment of the image to left or right. If this doesn’t give the desired effect, the easiest thing to do is to insert a table with 1 row and 2 columns. Give the table a 0 width border.·Place the text in one cell of the table and the image in the other.
• To put several images on a line, create a table with one row and several columns (one for each image).·Put each image in its own cell, then select all the cells, right click, and choose Cell > Table Cell Properties.·Then set the alignment to Center.·This will space the images out evenly across the page.

How to Make A LightBox Image

Follow these steps to make a lightbox image -- when a visitor clicks on an image, a full-size version is displayed in a captioned popup.

1. First you will need to upload a thumbnail and full-size version of the image.
2. Insert the thumbnail image into your article.
3. Click once on the image thumbnail to select it, then right click on the image and choose Insert/Edit Link. ·This will bring up the advanced link dialog (Figure 3).
4. Click the Browse button (Figure 3-A). ·Select the full-size image you want to appear in the light box.
5. Fill in the Title field with the title and caption you want to appear (Figure 3-B). ·Separate the title and caption with a "::". ·For example "My Image::My caption".
6. Click the Advanced tab. ·This is shown in Figure 4.
7. Fill in the Classes·field (Figure 4-A) with "jcepopup".
8. Optionally, you may also group several images on a page so that they show up in a slideshow in the lightbox. ·To do this, select the Relationship page to target·field (Figure 4-B) and choose Add Value (the last item in the list). ·Then fill in the field with "group[groupname]" where groupname·is the name of the slideshow group. ·All the images on a page with the same groupname will appear in a slideshow together in the lightbox.
9. Click the Update/Insert button (Figure 3-D or 4-C).

Figure 3: ·Advanced Link dialog

Figure 4: Advanced Link dialog - advanced tab

Technical Notes

These notes are for administrators who want to use this tutorial. ·If you are one of my clients, you can ignore this section.

This tutorial assumes you have Joomla! installed and have the excellent ·JCE content editor installed and set as the default text editor. ·To use lightboxes, you must also install the JCE Mediabox plugin.

Like this tutorial?  Want to suggest a topic for another one?  Send mail to This e-mail address is being protected from spambots. You need JavaScript enabled to view it .  You can also tweet your requests to @314piesJR.

The Joomla! name is copyright by Open Source Matters, Inc. ·To get started with Joomla, go to joomla.org.