Uploading Multiple Images to your Website

In the next couple of articles, we will cover how to add slide shows and videos to your website. Rather than having a couple of images per article, the number of images being transferred are likely to increase dramatically. At some point, you may get tired of using the Joomla Media Manager to transfer files one at a time. Thankfully, there is a way to transfer images up to ten time faster using a Joomla Extension called Extplorer. The purpose of this article is to show you how to upload and use this extension.

Capturing Images

One way to get images for your articles and slide shows is to take them with a digital camera. Another is to capture images and screen shots from the internet using a screen capture tool. I mainly use a free program called Photoscape to capture screen shots. You can learn more about this terrific image editor at: http://www.photoscape.org  This program has many of the features of Photoshop and can be downloaded from:

http://download.cnet.com/PhotoScape/3000-2192_4-10703122.html?part=dl-6295843&subj=dl&tag=button

Here is the Photoscape Start Screen:

I also use another tool called Snag Screen to capture screen images (for example, if I want to capture images of functions in Photoscape). Here is the Snag Screen main screen:

Either way, set the settings to create an image file, rather than merely placing the image on a clip board. Then save the image as a JPEG file in the image folder associated with the article you are writing.

To use the screen capture function of Photoscape, from the Start screen, click on Capture Image. Then from the Pop Up screen, select “Open at the Tab of Editor.” Click on “Capture Region” to get the exact area of the screen you are discussing in the article.

Once I have all my images in a folder (and usually after the article is done), I optimize the images to reduce the image size and file size. For example, the article on Joomla Menus had 12 images. This are all in a folder called j12 (because it was the 12^th Joomla article. Each image has both a number and a brief description:

Holding the cursor over the image, you can quickly tell the image size and file size of each. If the image size exceed 700 pixels, or the file size exceeds 100 KB, then I open the image to reduce the image and/or file size. To optimize an image, left click it to select it, then right click it and from the list, open the image with Microsoft Office Picture Manager.

You can see that this image is 922 pixels wide and the file size is 122 KB. I generally do not want the picture to be bigger than 700 pixels (so the image size will stay inside the width of your article) or the file size to be bigger than 80 KB (so that the image will load quickly). To reduce the image size, click on Picture > Resize. This brings up the following screen:

Select “% of original width and height” and use the drop down arrow to reduce the image size to no more than 700 pixels. Then click on SAVE. The image now has a file size of 64KB and the important details are still readable. If the file size was still too big, you can click on Picture > Compress, then use the Web Page setting to reduce the file size even further. But since the file size is small enough, just click on close and move on to the next image. After making sure that all the images in your folder have a small enough image size and file size, we are ready to upload all of them to the images/stories/joomla/j12 folder.

It can be rather time consuming to add 12 or more images one at a time using Joomla’s built in Media Manager. Fortunately, there is a way to add images in groups rather than individually. First go the Joomla Extension Directory and download an important Joomla extension called Extplorer:

http://extensions.joomla.org/extensions/core-enhancements/file-management/2630#action

(Note: This is the simplest image and file manager extension for Joomla. However, some computers have trouble downloading this file, or uploading it with the Joomla Extension Manager or using the program with their Joomla website. If this happens to you, there is a slightly more complex file manager, called NinjaXplorer, which is also a free download and works just about as well:

http://extensions.joomla.org/extensions/core-enhancements/file-management/4746#action

To install Extplorer to your website, first download the program from the link above to your C drive. Then log on to your Joomla Administrator Control Panel and go to Extensions > Install.

Upload the program just as you did the FCK Editor.

To upload files using Extplorer, click Components from the top menu. Then click on Extplorer.

Under the Directory Tree (on the left side of the screen), click on the folder that you're uploading your images to. This is usually the images/stories folder. Then create a new folder inside of the images folder.

Click the New File button:

When you click the New File button, the following window displays:

Be sure to select “Directory” with the Drop Down arrow. Then name this new folder with the name of the article or slide show that the images will be placed in. 

Click the Create button to create your folder. You should see your new folder under the Directory Tree. Click on your new folder to open it and add images to it. Then, click the Upload button.

This opens the Upload file screen. Click on the browse button to find and upload up to 7 images at a time. The maximum upload limit is actually 7 MB.

Click Save to upload the files. You will notice that all 7 images load more quickly than a single image loads using the normal Joomla Media Manager. Repeat the above steps if you have more than 7 images.

Click the "Back To Joomla" link in the upper left corner of the Extplorer screen to exit eXtplorer.

Now that you know how to upload multiple images, the next article will review how to use some of Joomla’s slide show extensions.