Uploading and inserting images in Joomla

A frequent question Joomla newbies have is how to upload and insert an image into an article. There are several different ways to do this; try them all and see which works best for you.

First, let’s clarify our terms:

  • You upload an image (or any other file) when you copy it from your local computer to the server out in the Internet that is running Joomla.
  • You download a file when you receive it (copy it, really) from the server on the Internet running Joomla to your local computer. This isn’t really relevant to the issue at hand, but newbies tend to mix up download and upload, so I mention it here for clarity.
  • You insert an image, for example in an article, by making that image display within the article. An image has to have been uploaded before you can insert it.

With our terminology established, let’s begin:

UPLOADING AND INSERTING IMAGES WITH THE JCE IMAGE MANAGER
This method assumes that you have the JCE Editor extension installed and properly configured. Start with the “Article (Edit)” window open. Place the cursor where in the text you want to insert the image to appear; for best results this should be at the beginning of a paragraph, before the first letter of the first word. Press the “Insert/Edit Image” button:

The Insert/edit image dialog will open. Press the browse button in the
upper right corner:

(If you don’t have a browse button, then go to Components – JCE Administration – Group and click on your group’s name to open it for editing. In Layout – Additional Plugins, make sure “File Browser” is checked and press “Save”. Repeat this for any other groups you want to have a browser button.)

The browser dialog will open, beginning in the images/stories directory, labeled “Root”. It works in a similar manner to other file managers. Notice that when you click on a directory in the left column, any images or subdirectories it contains appear in the center column; scroll down to see them all. If the image you want to insert has already been uploaded, skip to “Inserting an image” below. Otherwise, read on:

Uploading an image
Use the browser dialog to navigate to where in the Joomla image collection you want to upload the image to. This can be anyplace you like, but I suggest having a logical organization that will help you when you’re looking for that image months from now. Notice that you have a “New Folder” button (in the upper right corner) to help you organize your files. If you select a file, you will be given several other organization buttons to the immediate right of the image thumbnail (rename, delete, and so forth).

Once you have navigated to where in the Joomla image collection you want to upload the image to, then press the upload button (in the upper right corner). The upload dialog will open; press “Add”.

A file selection dialog will open; select the image on your local computer and press “Open”. You will return to the upload dialog. If you want to choose more than one image to upload, repeat the previous step. When ready to upload your image(s), press “Upload”. When finished, close the upload dialog.

Inserting an image
Once the image you want has been uploaded, navigate to it (look for it in the center column), select it, and click the Insert button:

The browser dialog will close, returning you to the insert/edit image dialog, but this time with the name and location of your image filled in. Write a description for your image. Leave the other fields blank: let your template’s stylesheet control image presentation. Press “Insert”:

The insert/edit image dialog will close, returning you to the article editor with your image properly inserted where you had your cursor.

UPLOADING AND INSERTING IMAGES WITH THE MOSimage CONTROL
Start with the “Article (Edit)” window open. Place the cursor where in the text you want to insert the image to appear. Find the “Image” button below the text entry field and press it:

Henceforth the process is essentially the same as described above using the image manager, with two differences. First, the interface is of course somewhat different (duh). Second, you do not have file and folder organization controls. To organize your files, use the JCE image manager (above) or the media manager (below).

UPLOADING IMAGES WITH THE MEDIA MANAGER
Go to Site – Media Manager. Use the controls to navigate to the directory you want to upload an image to. Note that the Media Manager first opens in the images/ directory. Don’t upload anything here; this is for Joomla’s internal images only and you won’t be able to work with images you upload here. Instead, upload your images to images/stories/ or to a subdirectory of it.

Both the JCE image editor and the MOSimage control enforce this by not allowing you to upload or browse anywhere outside images/stories/. This is one reason I prefer to just not use the Media Manager at all and instead do everything in the JCE image editor or the MOSimage control: it keeps me from making this mistake and getting frustrated later.

Find the “Choose…” button near the lower left corner of the viewport. Press it and select the image on your local computer you want to upload. Now press the “Start Upload” button. Your image is now uploaded. You will of course still have to insert the newly uploaded image into an article; use the image manager or the MOSimage control for that as described above.

Advertisements

About Warren Post

So far: Customer support guy, jungle guide, IT consultant, beach bum, entrepreneur, teacher, diplomat, over-enthusiastic cyclist. Tomorrow: who knows?
This entry was posted in Uncategorized and tagged . Bookmark the permalink.

2 Responses to Uploading and inserting images in Joomla

  1. anonymous says:

    Anonymous writes:hi warrenwhen i open the jce image editor i do not have a browse button next to image url.regards

  2. wpost says:

    If you don't see a browse button, then go to Components – JCE Administration – Group and click on your group's name to open it for editing. In Layout – Additional Plugins, make sure "File Browser" is checked and press "Save". Repeat this for any other groups you want to have a browser button.I've added this information to the article. Thanks for helping me to improve it.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s