Working with Images
Many users want to know how to insert images directly into the body of their web pages. Photo editing software will allow you to change the resolution of the image, as well as the image width, both of which are crucial to viewing the image successfully online.
Posting photos on your site requires photo-editing software, such as GIMP (open-source), Photoshop®, or Photoshop Elements®. Since we work with some of these applications we can occasionally provide assistance, but we should not be considered as the support for either of these applications. Additionally there are a number of free photo editors available for Windows that you may choose to use or came with your camera. Since we do not have familiarity with the vast number of programs out there we cannot recommend any others, nor can we provide even the basic level of support for them.
How wide should my photos be?
This really depends on what you want to do with the image, and you do have some flexibility. The first thing to note, is that any photo coming directly out of a camera today is typically 2,000 pixels wide, or more. Your screen size is generally 800 - 1,024 pixels wide, so you can see you will need to resize the image before you load it up to our server.
Department Home page photos are designed to be no more than 300 pixels wide. If you are using the free form area of a page as your home page you have more flexibility, but in most sites 300 pixels generally represents half the width of the page.
Free Form Area photos that are inserted into the text can be of any size depending on what you want to accomplish. Remember the free form area of a page is about 500 pixels, so unless you want the photo to be the dominant element you should reduce the size before you insert it into the page.
The following instruction is for Photoshop users, but the same advice about image resolution and sizing applies.
 File Size/Resolution:
The resolution for photos (and other jpgs) to be viewed on the internet should be 72 dpi. That is the resolution of your screen, and anything larger will only increase the amount of time it takes to download the image. For the following exercise, your photo should be no more than 500 pixels in width. This is the full width of the text area of any of your web pages.
1. In Photoshop, click on the Image choice on the menu bar and choose Image - Resize - Image Size.
Most cameras create photos that are 72 dpi. If your's is not uncheck the box at the bottom of the window to Resample Image. Then change the Resolution to 72. You will notice the Pixel Dimensions do not change, but the Document Size does. Now re-check the Resample Image option. Next you need to reduce the pixel dimensions to 500 or below, depending on how much of the page you want the photo to occupy. So your file size will be smaller but the photo will look just as big - which makes you and your webpage viewers happy.
If the photo is to be positioned on the Department home page you should keep the pixel width to 250 - 300 pixels. Also use 250 - 300 pixels if you plan to wrap any text around the image in the Free Form Area.
2. Now that you have resized the photo you need to save it to your computer so you can use it. To do so click File - Save For Web. This will automatically compress the image and save it as either a JPG or GIF file, which are web compatible. If you do not have a Save for Web option, be sure to choose either the JPG or GIF file format prior to saving. Give the photo a logical name so you can easily find it.
 Inserting Images into the free form area
To insert a picture directly into a FirstClass document, position the cursor at the beginning of a paragraph then Insert from the lower toolbar and choose the "Image/File" option. You will need to find the file on your computer in the directory/folder where you saved it.
When you click "Save", the photos will automatically upload to the FirstClass server and into the document where you have positioned the cursor.
You can do simple formatting on an image inserted into the free-form text area in any LN page and make the text wrap around the image on the right or left. Right click on the image you want to format, choose Format Image and the Format Image window will appear.
The default alignment of an image is Inline Center. The Alignment pull-down menu allows you to choose how the text in message body interacts with the image. There are five alignment options to choose from:
Right: The image will appear at the right-hand side of the page, with the text on the left-hand side aligned to the top of the image.
Left: The image will appear at the left-hand side of the page, with the text on the right-hand side aligned to the top of the image.
Inline Top: The image will appear to the left of a single line of text aligned to the top of the image. Not recommended.
Inline Center: The image will appear to the left of a single line of text aligned to the center of the image. Not recommended.
Inline Bottom: The image will appear to the left of a single line of text aligned to the bottom of the image. Sometimes useful, but not recommended.
View Size: The View Size pull-down menu allows you to choose, in percentages, the scale of the selected image. Alternatively you can change the width and automatically change the height by checking the Maintain Aspect Ratio checkbox. Unfortunately this will not change the size of the image file that needs to be downloaded from the server, so it is always best to resize the image before inserting it.
Alignment: Just like text you can Left, Center and Right Justify the image on a page when you do not choose to have text wrap.
Padding: Padding allows you to easily add space between the edge of the image and any text that wraps around it.
Comments: Be sure to enter a text comment that describes the image so your site will remain in compliance with ADA requirements. You can then view the page online by opening a web browser (Explorer, Navigator, Safari, Foxfire, etc). If you haven't linked the new page to an appropriate parent page, you will have to remember what Conference (folder) you created the new page in, as well as the name of the page you created, so as to follow the links to that page successfully.
Sizing photos and images correctly means that your site pages will load faster and look better - which means residents will come back to use your site over and over again.
Replacing existing photos
To find out the size of an existing photo on your site simply go to that page using your web browser. When you find the photo, click on it using the right mouse button and select Properties. This will not only tell you the width and height of the image, but it will also tell you the name of the photo and where it is located. If you are replacing an existing photo with a more updated version it is easiest if you simply give it the same name and rename the old one.
 Uploading image files to your website
First you need to determine where you want to store the file. If you only have a few you may choose to do so in your department folder. If you have a lot of photos for a photo gallery you may want to create a sub-folder of your department folder to store them in.
Once you have the folder open choose from the main menu File - Upload. Find the file on your computer and click Open. While the file is uploading to our server it will appear in italics. Once it has been successfully uploaded it will revert to normal text.
You will notice that the subject of all uploaded files is "Uploaded File" or "JPEG Image File". It is important to change this, and possibly to change the name as well. To do, so click on the file and choose File - Properties. When the properties window appears be sure to eliminate any special characters and spaces from the name. Be sure to preserver the .jpg or .gif extension. In the subject field delete Uploaded File and replace it with a description of the photo. This will make it easier to manage them after the fact and to comply with the Americans with Disabilities Act.
Uploading Multiple Files
If you want to upload a number of files at the same time you can easily do so by a number of methods. In the above scenario, if you want to upload a number of images that appear in sequential order on your computer you can click on the first file, then holding down the shift key click on the last file. This will select a number of files at the same time, and by clicking Open will upload them all at once. If the files are not in order holding down the CTRL key will allow you to randomly select files for upload.
For those of you familiar with "drag and drop" capabilities, if you can place the target folder from our server side by side with the originating folder on your computer you can select one or multiple files as above and drag them from your computer and drop them in the folder on our server.
|