How to insert Images on pages

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 change the picture on and choose “Edit Document”.  For example, if you want to modify an image on the “Contact Us” web page, you would right-click the “Contact Us” document in the left hand tree diagram.  As soon as the document opens, scroll down in the document to the section titled “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 adding an image to the “Contact Us” document, you would want to choose the “Contact_Us_Photos” folder.  (This tutorial will not cover how to upload images, but rather explains the process of adding an image to a page.  To find out how to upload images, see the tutorial entitled “How to upload images”).

6. Click the “Contact_Us_Photos” and immediately you are taken inside of this folder.  If an image already exists in this folder, simply click it with your mouse and the image will immediately be loaded.  You’ll notice once you click the image you want, the box with all the folders will disappear.  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”.

7. 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). 

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