Updating or Adding Website Files or Images

Overview

Use the info on this page for any/all of the following things. You can combine any type of the following in one pass of these procedures:

• Add new documents (not new pages - do that with the CMS Admin interface) to the website for download
• Add new photos to the website for use on pages
• Add any other sort of binary file for download
• Update any existing items of the above types

Throughout the rest of this page, the word FILE can be used to mean any of the above types of items. So if something talks about updating a file, it can apply to photos, documents, powerpoints, whatever fits in the above categories. Often, there is some special handling for images. When this is the case, the word picture or image will be used.

Website is Case Sensitive

Note carefully that the website system treats folder and file names as case sensitive. This means that MyFile.doc is not the same as myfile.DOC and is not the same as myfile.doc. This applies to both files and folder names!

Updating existing items or recreating existing folder structure, be certain the case of the file or folder name matches that used on the website now. For new items you can use caps however you please, but it is often easiest to just make the file all lowercase.

Organizing Files: New Files

New files can be added to the site and then linked on one or more page(s) for download by browsers of the site. Collect the new files and organize them in local folders on your computer as they should appear on the web site under the Files folder. Files on the web site are mostly held under the Files directory. You can browse the organization of the existing files by going here. The folders you see organize the files roughly by the page they are used on. If a file will be used on more than one page, organize it according to the page that will be most prominently featuring it.

If you have new files for a new web page (or one that does not yet have any files already, and thus no folder tree exists for it on the site now) just make a new folder on your computer at the appropriate level and place the new file in it.

Example: the robots page has images and other files about all the existing robots. You can see that each of these files is in the About_Us folder (as this is where the Robots page is contained on the web site menus) , then under a Robots folder (representing the Robots page itself). If you wanted to add new files for new content you would edit into the Robots page for a new year's robot, you would create a Files folder on your computer, then in it create an About_Us folder, and then finally a Robots folder and place all the new files within that folder.

New Folder Example: Now let's say that the team really loved the new robot and wanted to make a dedicated page for it, which is a sub-page of Robots in the CMS (menu tree). If you had files for this page, you would create the same folder structure as in the example above, but instead of placing your new files directly in the Robots folder, you would make another folder under it that is representative of this new page (maybe the name of the beloved robot or the year in which it was made). You would then place the new files for that page within this new folder.

Organizing Files: Updating Existing Files

Existing files may be updated by basically following the directions for Adding New Files above, but instead of making up the folder location and name, you use the exact same name and folder location as already exists on the site.

If you need to know the existing location of a file, you can find it easily by browsing to the page that has the file linked (or includes the image for images).

To find the location of images: right-click the image and click "view image" or "view image in a new tab". Once the image is shown, the location of the image will be in your browser's address bar. Remove the initial "http://penfieldrobotics.com" and you have your folder structure and final file name.

To find the location of other files: hover over the link and most web browsers will show the web address to which the link refers. This is the file's location on the site. You can also right-click and "Copy Link Location" to copy the file location to the clipboard. Remove the initial "http://penfieldrobotics.com" and you have your folder structure and final file name.

Again, be conscious that the capitalization of the folders and image file must match the originals.

Preparing Images for Upload

Aside from the above procedures for organizing the files, images need special consideration.

Image Format

Images should use either png or jpg (jpeg) format. For existing image updates, you should use the same format as the original image. You can convert image format using photoshop or gimp or other tool.

bmp, gif, etc are not to be used except when updating an existing image that uses these formats.

Image Size

Images should be resized before they are provided for uploading to the website. Yes, you can most certainly resize the image in the CMS editor or via HTML code once it is on the site. But this is highly discouraged because it requires the user's web browser to download the actual image at full size, then resize it locally on their computer. This makes the web site loading "feel" slow, as well as requires significant additional internet bandwidth (important for mobile browsers on phones, etc!)

Use gimp or photoshop or other tool to resize the image and then place the result in the appropriate location in your local folder structure per the instructions in the previous section.