4.3 Organizing Images in a Folder on your Home Computer

In the previous article, we looked at writing our first article, called Welcome to our Website. We had four images in this article. But where did they come from? The internet is very visual. Take your time to find images which support your ideas. Use as many images as possible which show people and especially showing children. Charts, graphs and tables can also be copied as images. Avoid simply putting in a bunch of text on your web pages. .

Using Snag Screen to Capture Images

There is a very useful tool called Snag Screen 1.0 which can help you copy images off of the internet and into your articles. It will also help you create image files for transferring the images to your website separately from the text in your articles. 

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 Snag Screen to capture screen images

Set the settings of Snagscreen 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.

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. Holding the cursor over the image, you can quickly tell the image size and file size of each. If the image size exceeds 700 pixels, or the file size exceeds 100 KB, then 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 100 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.

CREATE a FILE AND FOLDER STRUCTURE on your HOME computer for your website’s articles and images

As you add articles to your website, you may eventually wind up with more than 100 pages. If each page has 10 images, you may eventually have more than 1000 images. To make matters even more complex, you may have a dozen different websites covering a dozen different topics.

It is therefore important to establish a file and folder structure for all of these articles and images from the very beginning.

First, you should have a root folder in which to keep all of the articles and images associated with your website. Call this root folder mywebsite. Then inside of this website, you should have a folder which contains all of the images of the website. Call this folder images. This will correspond to the images/stories folder of your actual Joomla website. Then inside of the images folder, create another folder for each article. For example, the folder for your welcome article will be called welcome. Then inside of this folder will be the four images of the welcome article. This should be numbered w01, w02, w03 and w04. So the path to the first image in the Welcome article on your home computer will be mywebsite/images/welcome/w01.jpg. The path to the same image on your website will be mywebsite.com/images/stories/welcome/w01.jpg.

After your first article is written in Word, create a root folder for your website and give the folder a name. Then put the Word document complete with the 4 images in this folder and call the article file Welcome to our Website.

 Then copy the article and save it AGAIN as a new and separate file called WEB Welcome to our Website. Thus, you will have TWO versions of each article.



Next, close the first Word Document. Then, create an image folder inside the root folder. Name the image folder images. Then create a folder inside of the images folder and call it welcome. This is the folder that will hold the 4 images from your Welcome Article.

To be clear, all of your website documents should be stored in a folder on your laptop called mywebsite – or whatever the name of your website is. For the Washington Public Bank project website, the root folder is called wabank. Then inside this folder should be an images folder and inside of this folder should be a separate images folder for every article on every page of your website. The following is an image of the four folders containing the four articles for the Site Start Up Category of this website:

If you have a lot of articles, it is useful to number them to keep them in order. The first number refers to the category (they are all in the same category). The second number is the article number. Then inside of each article folder are the images files for that article. These are also numbered. Below are the 19 images in the article called Why Choose Joomla?

A similar images folder structure will be created later on your web host’s server for your website in their images/stories folder.  

Once you have created the welcome article images folder, then use Snag Screen to copy jpeg files of every image in the web version of your Welcome article to the images folder. These image files should be numbered, (for example, w01, w02, w03, but for the sake of speed, names of images are usually avoided. Also because these image files will be transferred directly to your website, the file names for these image files should only be in lower case. No spaces and no capital letters.

Snag Screen allows you to save the images as either JPG, PNG or several other options. In general, save the images as JPG files.

Below is what the WEB version of the Welcome article looks like after the four images have been copied to the images folder and the images have then been deleted from the WEB version of your Word document:

WEB VERSION of Welcome to our Website!

Introduction Content

W01

Main Body Content First Idea

W02

Main Body Content Second Idea

W03

Main Body Content Third Idea

W04

Conclusion

Note that the web version does not have any actual images. It now consists only of text – with the w01, w02, etc indicating where the images should be inserted back in to the text one the text itself has been copied and pasted into the website article.

Now that your images are organized on your HOME computer, it is time to copy each of them into a similar folder on your website server. That is the topic of the next article.