I want to put a picture in an article.  Can you give me a step-by-step walk through of the process?

Placing pictures on your Joomla web site is a combination of tricky and easy!

The instructions that I give here assume that you have installed the very nice JCE editor to replace the built in default Joomla editor.   If you have not installed, JCE, then see the alternate instructions below.

Step 1:  Make the Picture Web Friendly 

First of all, the picture needs to be made "web friendly."   Many times you will get a digital picture sent to you, and it is in high resolution (so it will be nice and sharp when printed).  

Well, that's great if you are wanting to print the picture, but those nice sharp pictures are often way to large for a web site.  

So, photos often need to be sized to place on your website first.  That is done outside of Joomla, and there are a number of tools that will do that for you.

I use "Paint Shop Pro," but other programs that will do this for you include Photoshop, Photoshop Elements, Picasa (free), the Microsoft Office Picture Manager (free with Office), and many others.

Step 2:  Start Editing the Article Where You Want the Picture

The next step is to open the article in the Joomla editor.  You can do this from the Joomla front end, or the Joomla back end.

Step 3:  Put Your Cursor on the Line Where You Want the Picture to Go

Place your cursor in the article where you would like the picture to go.  You don't need to worry about whether it is on the "right" side of the text, or the "left" side, or if you want the picture to be totally by itself.  That setting is determined later.

Step 4:  Click on the Picture Icon On the Editing Toolbar

This assumes that you have the advanced editor installed (which I install on almost all of my Joomla sites).  On the last line of icons, the second icon from the left is the "insert / edit image" icon.  

Click on that, and the Image Manager Screen will load.

Alternate Step 4 if you are not using the JCE Editor

If you have not installed the JCE editor, placing pictures is a bit more complex.  Generally you will use insert the  {mosimage} code in your text where you want the image to appear, and then use the {mosimage} manager on the "images" tab of your article editing page.

To insert the {mosimage} code simply click the "insert image" button at the bottom of the editing window, or type is in manually. 

Step 5:  Use the Image Manager to Find / Upload the Picture

In this next step, you will use the Image Manager to tell Joomla what picture you want to place here.  The picture might already be loaded in your Joomla website image library, or it may be on your computer and needs to be uploaded first.   The image manager will take care of all of that.

Here is what the image manager looks like:

Now, the top half of the screen is for making certain settings for the picture.   The bottom have of the screen is where you select the picture itself.

Let's start there.

If the picture is already uploaded to your Joomla site ... 

If the picture is already on your Joomla site, simply select it in the list.  You will see a preview of the image on the right side of the screen so you can be sure that you have the right one.

If the picture is not yet on your Joomla site, and you want to upload it ...

Before you can place the picture in the article, you must upload it to your Joomla site.  To do that, click the "Upload Icon."  It isn't marked clearly, but you will use it a LOT so you need to learn and remember where it is.

Click on that icon, and you will get a "Browse" dialog box that will let you look on your computer for the photo that you wish to upload.

Navigate to your picture, and click OK to return to the "Upload" dialog box.   Click on "Select File after Upload" and then click "OK."

Now, you will be back to the Image Manager, with your picture uploaded to your website, and "selected" and ready for the next step.

If for some reason it isn't "selected," simply find it on the list of pictures on your website and select it.

Step 6: Set the Alignment for the Picture: Left, Right, Center

Most of the time, the only thing you need to worry about is the "alignment" of the picture.  

You have three choices:

Align the picture to the right side of the screen, with the text on the left, like this:

Or, you could have the image on the left, with the text wrapping around it on the right side of the screen, like this:

Or, you could just have the picture all by itself, with no text wrapping around it at all.  (This alignment is called "default.")

Now, you select the position or alignment that you want for the picture here:

  You select either "left", "right", or "default" (for centering).  

 Step 7: Change the size, if needed

Hopefully you have resized your picture to the right size before you uploaded it.  However, if you need to make the picture a bit smaller, you can change the width of the picture (Joomla will change the height automatically to keep the same proportion for the picture).

Simply enter a new number in the width box and press  <tab> to ensure that the width recalculates properly.

Step 8:  Update Your Article With the Picture 

Those are generally all of the settings you have to make for the picture!

Simply click the <Update> button and you will be returned to your article with the image in place.