Add a Picture to the Interior Design Page for “www.jwmarchitecture.com”

1.         Go to the Site Administration (Ctrl+Alt+M)

2.         On the side bar menu select “8. Documents -> b. View & Edit Documents” or “8b” in the shortcut box

3.         In the Document ID Search Criteria enter “48” for Interior Design Page

4.         Click Search and only 1 Documents will be found

5.         Click on the Document Title or ID to open Document Management page

6.         You are in Document Management Page, scroll down to the section called “Document”

7.         In the Document section click on the Check-Out Document picture icon (it’s the last one)

8.         Your Browser will prompt you to save “InteriorDesign.zip” zip file to your hard drive

9.         Save it to location you know

10.     Unpack the zip file to a new folder

11.     Using windows explorer go to the folder where you have unpacked the zip file

12.     This folder will contain a HTML file and a folder with the same name that has “_ files” in the end, this folder is called resource folder and it contains all the image files.

13.     The support folder has 2 type of files:

·         “Image0xx_small.jpg” is the picture that’s shown on the page

·         “Image0xx.jpg” is the picture that’s used for the zoom in

14.     Numbering on the file names pair with each other, e.g. Image001_small.jpg will show Image001.jpg when you click on it to zoom

15.     You have two basic choices here, you may add 3 portrait oriented pictures or, 2 landscape oriented pictures, anything else will require advanced html skills or a web developer

16.     Rename the new image files with the same file names as in the resource folder and use the next consecutive numbering from the ones already used

17.     Copy the ready “Image0xx_small” + “Image0xx” JPG files to the resource folder

18.     These are the dimensions (W x H) guide lines to follow: “Image0xx_small.jpg” with portrait orientation should be exactly “170x227 pixels”, “Image0xx_small.jpg” with landscape orientation should be exactly “266x200 pixels” , “Image0xx.jpg” should not exceed 700 pixels width or height, whichever is greater

19.     Open the InteriorDesign HTML file in your favorite HTML editor or notepad

20.     Scroll down to the bottom of the page and examine the document, you will notice the structure of this html is very simple (First Table containing 3 tables inside, Break Tag, Second Table containing 2 tables inside, Break Tag)

21.     Select one of the following tables by clicking and dragging your mouse from where the table starts and where a Break Tag ends, in that exact order, make sure to include the Break Tag to have that space between the tables

·         If you intend to add 3 portrait oriented images to this page, select the first table from the top of the document

·         If you intend to add 2 landscape oriented images to this page, select the second table from the top of the document

22.     Copy the selection into clipboard by “Ctrl+C” or right mouse click, then copy and, paste it before or after one of the 2 main tables

23.     In the middle of the table (the one you just pasted) find “Image0xx_small” and “Image0xx” and rename the last number to correspond with the number you put in the resource folder (Step 16-17)

·         Optional - Enter new description in the “alt=” tag to correspond with new image content, one “alt” tag will be found right after “Image0xx_small” in the same line

24.     Save HTML file (File->Save)

25.     To add another image repeat Steps 15-24

26.     When you have added the images, updated the html file and ready to load it up, open the browser window and return back to the Document Management Page (Step 1-5)

27.     Scroll down to the Document section and click on Update Document picture icon

28.     This will open the upload applet

29.     Click Add button to Browse for files

30.     Find the folder where you have extracted the zip file and did the updates

31.     Select the “HTML” file and click Open

32.     You will see in Append Document window that the HTML plus everything in the support folder for that HTML is selected for upload

33.     Click Upload button to upload the files

34.     Wait until the upload is complete before doing anything else, you will see green checkmark beside each file when it’s done

35.     Click Save button to save changes or (Ctrl+Alt+S)

36.     PortalProdigy will prompt that upload was successful

37.     Click OK to continue back to Document Management page

38.     Click Close button to close Document Management page or (Ctrl+Alt+C)