How to Add a Picture to a Page - With a larger PopUp

There may be times when you want your picture to show up on your site in a larger size but the space you have to display the picture is small or you have numerous pictures and only a small space you want to put them into. In that case a pop-up will do the trick. This starts as a small “thumbnail” sized picture and when it is clicked on a larger version “pop’s up/open”. This lets your clients see a picture in its larger (easier to view) format. To make your picture have a pop-up we need to do a slightly different process when adding it to a page on our site. First Things First: To create a pop-up to need to make sure your picture is edited to the correct size in a separate program before trying to upload it. One way to tell what size it should be is to go to your site and click on a picture that is currently a pop-up that is the size you think this one should be. Right click on that picture and select “Properties”. In the box that opens there will be dimensions. (i.e. 200x150). This is the size of that picture in pixels. Then resize the picture you want to add to the site, to that size in your software. Generally for a pop-up image something about 400pixels wide is good depending on the orientation of the original. Remember, when you are changing a picture from its original format or size always click “Save As” instead of save and choose a new file name for the resized picture. That way you do not change the original, in case you need it again in the future. If you try to adjust it after it is uploaded it can distort the picture, making it look scrunched or stretched on your site. Be sure the picture is saved in .gif or .jpg format. These are the most web friendly versions a picture can be in. Make sure the picture is not too big (file size, i.e. kb, mb, etc). The larger the file size the slower the picture will load when someone goes to the page it is on. You do not need to create the small “thumbnail” picture; the site will create that automatically when we upload the larger image. Now that your pictures are ready: Go to http://your-domain-name.com/admin Log in with the information provided to you in the welcome letter when you site launched. Go to the page you want to make the changes to (The page you want to add the picture on) Click on the page at the beginning of the paragraph where you want to place the picture. Even if you want the picture to ultimately be on the right side, still click to the left of the paragraph. We will tell the picture which side to be on when we insert it. In the editing buttons click the one that says “Insert/edit Image” when you put your mouse over it. (It should look like a small picture with a gold star) This opens a pop-up. In the pop-up window you will see 3 frames on the bottom half of the box. The center one is where the files and pictures that are currently on your site are listed. To add a new picture to the list: click on the upload button (It is on the grouping of small buttons to the right side, just above the 3 frames, the one labeled Details) A new, smaller box will open. Click the browse button and find the file you want to upload in the directory/folder on your computer. When you find the file, click it once and then click the open button. Now the file name shows up in the small window. Next to the word “Proportional” is a small checkbox. (By “Thumbnail”). Click in the box. Click the “okay” button. Repeat this step for all of the pictures you want to upload to your site. When you are done uploading pictures click the red X to close the small window. Across the top of the box is a set of tabs. Click the “Popup Image” tab. Click the “Enable” checkbox at the top of the tab. Find your picture in the list of files in the center frame. When you find it, click on the file name. A small box will pop-up that says “Use associated thumbnail?”, click “Yes”. Your picture will show up in the right frame at the bottom of the screen, and the location of the picture will fill in the space at the top of the box. In the “Caption/Title” field type a short description of what this image represents. This will show on the pop-up, just below the larger picture. Click the “Article Image” tab at the top of the screen. In the “Description” and “Title” fields type a short description again of what this image represents. In the align option pick how you want the picture to sit on the page. (to the right side, the center, the left side, etc) When you are ready click the insert button at the bottom of the window. Your picture is now on the page and is also, automatically a pop-up. Click “apply” at the top of the page. (Whatever you changed is now live on the internet) Open a new browser window or tab and go to your web site and look at the page you just edited (From the public’s view). Click on the picture you just added and make sure the pop-up looks how you wanted it. If it is the wrong size, you will need to resize it in your external software and upload it again and repeat all of the steps to reinsert it into the page. If all is good, go back to the admin window/tab where you were making changes and click the “Save” button. Clicking the “Save” button takes you back to the list of pages. To edit another page simply select it from the list. When you are done making all of your changes and have clicked the “Save” button on the final page you were editing, click the word “Logout” in the top right corner of the page. When making changes to your web site it is a good idea to open another window and go to the web site as though you were a customer and look at the things you have changed. This way if something didn’t turn out the way you wanted it to, you can catch it and fix the problem before the general public sees it. Click here to view, download or print a PDF version of this article. This link will open in a new window. When you are done saving or printing the article, close that window to be returned to this one. To save the PDF to your computer - right click on the link and select "Save link as..". To print the PDF click the link and when the new page opens click file then print in the menu options at the top of your browser window.