4.4 Transmitting Your Images to the Server

In the previous two articles, we first wrote a WORD document called Welcome to our Website including some text and four images. We then copied this article creating another WORD document called WEB Welcome to our Website. We then create folders to keep the documents and images organized in. Finally, we copied all of the images from the WEB version of the WORD document and placed these image files in a folder called welcomepageimages.

Note that the web version of the Welcome article now contains ONLY TEXT. There are no actual images in the web version. All four images have been transferred to the welcomepageimages folder which now looks like the following:

You should check to make sure none of these images is over 100 KB, but usually Snag Screen does a good job of optimizing and compressing the images as they are captured and transferred. .

The next step is to transmit these images to your Joomla website. There are two ways to transfer images to your website. The slow way for transferring just a couple of images is to use the Joomla Media Manager. The faster way to transfer up to 7 images at a time is with a Joomla Extension called Extplorer file manager. We will first look at using the Media Manager and then explain how to use the Extplorer file manager.

UPLOADING YOUR IMAGES USING THE MEDIA MANAGER

If you only have a few images in your article, from the Joomla Administrator Control Panel, go  to theSITE > Media Manager Page. Here you will see all the images used on your website.

To add images to articles, they must be added to the STORIES folder. So click on the Stories folder to open it.

To create a new folder for your welcome article, simply type the name of a new folder (for example type in welcome as shown below) in the box on the right of the word images/stories and then click on CREATE FOLDER to put a new folder in the images/stories folder .

Or if you only have a couple of images, you can just upload all of your images into the stories folder.

To upload an image, first select the correct folder you want to put the image in, then scroll down to the UPLOAD FILE box at the bottom of the page. Click on the BROWSE button to go to your files, select the image you want, then click SELECT.  This will take you back to the Images folder page. Your screen will look like the following:

Click on the Start Upload button to enter the image.

Then repeat these steps for each image you want on your website.

If you only have a few web pages with just a few images, it is not necessary to add a bunch of folders. Simply upload all of your images to the images/stories folder. However, if you have 20 web pages with 10 images per page, you will have 200 images to sort through whenever you are looking for a given image to add to a given article. Things could become a real mess if you do not organize your images into folders for each article and organize your articles into categories and sections.

This is why Joomla is called a Content Management System (CMS). It is because Joomla does an excellent job not only of helping you start a website without any computer programming knowledge – but also of helping you organize your web content so you can easily add to it as your website grows.

Adding and Using Extplorer to Upload Multiple Images to your Website

At some point, you may get tired of using the Joomla Media Manager to transfer image files one at a time. It can be rather time consuming to add 12 or more images one at a time using Joomla’s built in Media Manager. Thankfully, there is a way to transfer images up to ten times faster using a Joomla Extension called Extplorer. Extplorer allows you to add images in groups rather than individually.

I typically have 10 to 30 images per page/article so I usually use a Joomla Extension called Extplorer to transmit these images. To add this extension to your website, go to the Joomla Extension Directory, under Core Enhancements and click on File Managers.

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

Click on Download:

http://extplorer.net/files

And select the latest version to download it to your home computer. 

Then upload the component to your website using Extensions, Install.

(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 upload files using Extplorer, Then, in the Joomla Administrator, click on Component, Explorer to open this file manager. Then click on the folder wabank (or the root folder name for your website) to open it. Then click on the images folder, then the stories folder.

Then create a new folder, called welcomepageimages, by clicking on the NEW FOLDER ICON (WHITE SHEET WITH RED DOT IN LOWER RIGHT CORNER:

Web designers call folders “directories”. Select Directory. Kind of dumb, but get used to it.

Then click on CREATE, to create your new images folder.

You should see your new folder under the Directory Tree. Click on your new welcomepageimages folder to open it and add images to it.

There are no images in this folder yet. To insert images, click on the BLUE UPLOAD ARROW which is pointing up:

Click on STANDARD UPLOAD. You can upload up to 7 images at a time. Click on BROWSE and find the folder on your home computer with your welcome article images. Repeat for all 4 images:

The maximum upload limit is 8 MB so you will be will under the limit. Then click on SAVE (you may have to expand the blue box to see the SAVE button).

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.

When all the images for your article are loaded, click on BACK TO JOOMLA.

Now that we have our Welcome article images loaded to the welcome article images folder on our website, we are ready to copy and paste the article into our website. That is the topic of the next article.