How to Upload Images

1. Begin by logging into the Manager area of the website (if you do not know how to login to the Manager area, please see the tutorial entitled “General Overview”).

2. Next right-click the document you want to upload the picture on and choose “Edit Document”.  For example, if you want to upload an image on the “Contact Us” web page, you would right-click the “Contact Us” document in the left hand tree diagram and choose “Edit Document”.  As soon as the document opens, scroll down in the document to the section entitled “Template Variables”.

3. In the “Template Variables” section, you will see 4 titles, “Image Addition 1”, “Image Addition 2”, “Image Addition 3” and “Image Addition 4”.

4. To the right of the “Image Addition” titles, you will see a blank field with a button to its right which reads, “Insert”

5. Click “Insert” and immediately a box opens which presents you with various folders (i.e. Past_Projects_Photos, Contact_Us_Photos, etc.).  To help you keep your images organized, it is best that you choose the folder which corresponds to the document you are editing.  For example, if you are uploading an image to the “Contact Us” document, you would want to choose the “Contact_Us_Photos” folder.

6. Click the “Contact_Us_Photos” and immediately you are taken inside of this folder.  Once inside this folder, click the “Browse” button at the bottom of the pop up box (look at the bottom and you will see 3 buttons: “Create New Folder”, “Browse” and “Upload”).  Once you click the “Browse” button, you will be shown files on your own personal computer.  Browse on your computer until you find the photo you want to upload (please note: there is maximum file upload size of 2 megabytes).  For example, if you have photos on the desktop of your computer, you would browse to your desktop and choose the photo on your desktop you want to upload.  Once you find the photo you want to upload, click it.  Immediately the “File Upload” box will disappear and you will be taken back to the box with all the folders in it.  At this point, click “Upload” in the bottom right hand corner of this box and the image will begin to upload.  Please note, the larger the file size, the longer it will take for the image to upload.  Once the image has uploaded, it will immediately appear in the folder you uploaded it to.  Now click on this image and it will be loaded into the “Image Addition” field under the Template Variables section. You’ll notice once you click the image you want, the box with all the folders will disappear.

7. If you look in the field to the right of the “Image Addition” you choose, you’ll notice there will be text indicating the path to the file.  For example, if you clicked “Insert” next to “Image Addition 2” and you choose an image named “Photo.jpg” in the “Contact_Us_Photos” folder, in the field to the right of “Image Addition 2” will be “assets/images/Contact_Us_Photos/Photo.jpg”.

8. Now simply save the document by scrolling back up to the top of the page where you will see to the right of “Create/edit document” 2 rows of choices.  On the first row you will see “Save”, “Delete” and “Cancel”.  On the second row, you will see “After saving: Add Another, Continue Editing, Close”  Simply choose “Continue Editing” and then click “Save”.  If you have another browser or tab open, you can go to the page where the change occurred (in this case the “Contact Us” page) and you’ll be able to see where the change was made (in this case a Photo being added).  

9. If you do not see any changes on the page you just modified, simply refresh that page and the change should show up.