Transferring Pictures to a Web Page
This involves three steps:
1- Image optimization/formatting
2- Uploading the picture in Media Manager
3- Inserting the image in the web page
1- Image Optimization
Pictures can be taken from various sources. They must, however, be optimised before inserting them on your web page.
Why? The image weight has to be as low as possible; the lower it is the faster it downloads.
This process has to be done using a Photo Editor program such as Photoshop, Microsoft Photo Editor, PhotoFiltre, etc.
Our trainer will provide you with a Training CD from where you or the trainer can install PhotoFiltre on your computer or you can request us to send it to you by e-mail.
Once the program is on your computer the steps to open it are the same as to open most programs.
Go to your Start menu > select Programs > and click on the PhotoFiltre icon.
You will see the PhotoFiltre program displayed on your screen.
Once you have opened the program, go to File - Open – and go to the location of the picture file, e.g., Desktop / My Documents > Images.
Select picture required – and open it on your screen by double-clicking its name.
Click Image (on Photofiltre’s top toolbar) > 
and select Image Size.
This action will open a small window where you have the options to adjust the size and the quality of your image by changing the following information:
Width: type in 360 (example only)
Height: adjusting the Width automatically adjusts Height
Resolution: 72 (this is the standard resolution for images for the internet)
Click “OK”.
Go to File - Save as
It will open a new window where you will have the following different options:
Save in : this option lets you choose the folder to save the image to
File name: make up a descriptive yet short name for your file and use underscores “_” instead of gaps
Save as type: you will see different file formats here but always choose JPEG as this is the best format for the internet.
Press Save.
A window to decide the level of compression of the file will appear. Just click OK here and your image is then ready to be inserted in your web page.
2- Uploading in Media Manager
Media Manager is a kind of general folder you have in your Joomla administration area and it is where you upload and control all the files uploaded into your website as images, Word documents, pdfs, etc.
Go to Site (in the top bar menu) -> Media Manager
Managing images in Media Manager is very easy. It is like managing files on your own computer. The first important item to note is to keep your images organised through the use of folders. As your website grows you will be adding more and more images to it, so it can quickly become unmanageable if your images are not organised.
The second and most important item to note is where you place an image in the media manger because your web page will always reference that exact place, where you have stored your image and that exact name, which you used for the image. So if you decide later on that you want to change the structure or change the names in your media manger, you will have to change all the references to the images involved on each web page, where they should appear. This can be a huge task if you have a large website, and this is best avoided through pre-planning.
The media manager has some folders and some images already created as a default. You can leave all those alone as they have some use throughout the site. The main folder that you will be concerned with for adding images to your web pages is the “stories” folder. You can delete all the unwanted items in this folder if you wish.
Go to Media Manager -> Stories
There are no limits on how many folders you create or how deep you go with the folders.
Navigating the media manager
1. Clicking on the image of the folder will open that folder and display the contents.
2. Using the left side navigation bar to open the correct folder.
3. Clicking the folder with the little green up arrow in it will take you up a level, to the parent folder directly above the folder you are in.
Creating / Deleting Folders
In front of the “Create folder” button, type in the name that you would like to call the new folder and click “Create folder” button.
Tips
Do not use any spaces or non-alpha numeric characters in the folder name.
To delete a folder please make sure all the images are deleted from the folder first then click on the trash can to delete the folder. There is no way to recover a folder or image when you have deleted it.
There is no way to move folders around the media manager.
To upload Images
To upload an image, make sure that you are happy with the image on your own computer first. (See 1-Image Optimization).
In the media manager go to the folder you wish to upload the image to. If you want to add the image to a web page place the image in the stories folder from the root directory or a folder in the stories directory.
Then click on the Browse Files button in the lower section of the screen. This will give you a dialog box with your own hard drive on it. Select the image you want to upload on your hard drive and then click open. This image will appear under the browse button. You can select more than one image to upload. If you finished selecting the images, just press Start upload to start the upload process.
If you want to modify the image you can change it on your own computer, re optimize it and the upload it again following the steps above. Before the update process you have to delete the old file from the media manager.
To delete images
Go to where your images place in Media Manager and once you see the your image thumbnail click the trash can underneath the image.
Remember that if a web page has a reference to this image it will show as a missing image on that page till you remove that reference.
You cannot move an image to a different folder, you need to upload it again.
3- Inserting the image in the web page
The current Joomla release is really great in supporting images. Inserting an image is like in Word. You will see what you will get; the image automatically will be inserted into the document.To insert an image onto the page at each place you want to see an image click the “Image” button beneath the text editor and a new window will appear to select the image. It is recommended to upload the picture first using the Media Manager.
Select the image you would like to insert onto the page.
To navigate in this window simply click on the directory you would like to go in, and simply click on the image you would like to insert. You can recognize that the “image URL” field filled with the path of the image. Just press the Insert button in the right top corner to insert the image.
You can edit the details of the inserted image if you click on the image, and click on the small image icon on the text editor menu bar.
A new window will appear and will show you the details.
On the General tab you can set up the image description, and the image title which will appear when you move your cursor over the image with the mouse.
On the Appearance tab you can set up the image alignment. On this picture you can see if the Alignment is set to right. The small sample will show you the possible result of the settings.
Creative Considerations
Adding images to a website is quite easy once you understand the technical aspects. The questions you need to pose are the following:Do I need to add images to a page?
Do the images enhance or detract from the web page?
Do the images match what I am trying to say in the content?
The answers to the above questions are mostly quite obvious, however many people still fall down on this. Creating a layout of a web page can be subjective, and an argument can be made for most design layouts. What one person creates and thinks is good; another can look at and deem it awful. Obviously there are web pages out there, which are badly designed, but where can we draw the line? Is there a base line of what is good layout?
Luckily the web has been around for a while and some conventions have been developed to help us stay away from the most basic errors. Everything else can be up for debate after that!
Copyright Issues: Do I own the copyright to this image? It is very easy to take images from the web and put them on your website. If you don't own the copyright to the image in question, and your hosting provider is sent a take-down notice, then your site could be pulled down (removed from the web) without any notice period.
The copyright holder is usually the person who took/drew/created the image and it is usually just a matter of asking them in advance for permission to use the image. You can also get images from the web that have a licence attached to them: there are specialised image gallery websites which supply such images, and as long as you follow the terms of the licence you will be okay.
Context: The second consideration is thinking about what message you are trying to put across on your page. Does the page need images? If it really doesn't, then don't put them on. If you are not sure, experiment with it. The main goal here is to make it easy and enjoyable for a viewer to read the page. Don't us images for the sake of using them.
For example: one web page has all the mass times for your parish. This is a data page, when people go to that page they are looking for data, they don't want to have to scroll down that page past the really nice image of the alter that takes up the full height of the page. However, without any images at all, the data on your web page may look a little dreary. The page can become enhanced with a small picture alongside the mass times. A little experimentation here will help you determine what looks best. If the viewers’ eye automatically goes to the picture rather than the mass times when the page loads first of all you may want to enhance the text or lower the tone of the image.
A second example: you have a web page detailing the history of the parish. Having lots of images to support the text would be a great idea so the viewer gets a visual sense of what they are reading about. Putting too many images, if there is not enough text, may detract from the text. In this case you could put the extra images in a photo gallery and link to the photo gallery throughout the text.
Image Size: Unless you want the image to be the central piece on your web page, don't make the image so large that it detracts from the text. Large images also mean large file sizes which then take time for the page to load. The opposite is also true: small images can seem out of place and it can be annoying for the viewer if he/she cannot make out the subject matter of the image. See the piece on image optimisation (5.4) earlier on in this tutorial.
Image Quality: This is another important consideration. If the quality of the image is not very high, then it can detract from the web page, and possibly the whole site. The rough guidelines to follow here are:
Unless it is justifiable, under no circumstances use clip art. It can really lower the tone of a website. If in doubt, the rule of thumb is that a page is better off with out an image rather than with clip art.
Again unless it is justifiable, don't use animated gifs. These are the little images that move (like a flag moving in the wind). They can really make a page look tacky and unprofessional. If you want to get across a sense of the page or site being Irish there are subtle ways of doing this and may even be put across in the design of the website (colour scheme etc.).
Low resolution of images. If the image has lots of pixilation, the picture will look blocky, so don't use it. Try to re-optimise the image.
That's all there is to know about handling images on your website. In the next chapter we will look at how to handle files that you may want users to be able to download.
Tips
Handling files other than images
At some point you may wish to have files for download, whether they are pdfs, word documents or zipped archives. You can handle these from the media manager as well. Please see Chapter 6 File Downloads for the website
