How to Add Pictures to Your Site

1. Drag the image element to a page. Then click on the image element to open the dialog box.

2. There are several ways to add a photo. The most direct is to upload an image from your own computer,

by dragging an image from your desktop into the window, or clicking the green “Upload a photo…”

button and selecting the file. However, if you are using a Chromebook, you will need to select “Image

URL.”

3. Next search Google for the image you are looking for by typing it into the Omnibox (address bar). Then select images.

4. You’ll want a high-resolution image for your website. Select “Tools.” Select “Size.” Select “Large.”

❶ ❷ ❸

❶

❷

❸

*Please do NOT use images that contain writing or watermarks on them. These are copyrighted images and

may not be used without permission from the photographer.

5. Select one of the images you would like to use by clicking on it. Now hover your pointer over the

picture you selected. Hold down the “alt” key and tap on your mousepad. If you are using a mouse,

just right click. You will now see a pop up box where you will need to select “open image in new tab.”

6. Click once on the URL which is located in the Omnibox (address bar). This will highlight the entire URL

at once.

7. Now that the URL is highlighted, you are going to copy the URL. Hold down the “control” key and tap

“c” on the keyboard. Release the control key.

URL is an acronym for Uniform Resource Locator and is a reference (an address)

to a resource on the Internet. Think of a URL as the name of a file on the World

Wide Web because most URLs refer to a file on some machine on the network.

However, remember that URLs also can point to other resources on the network,

such as database queries and command output.

8. Go back to your Weebly page where you already have open the image dialog box. Hold down the

“control” key and tap “v” on the keyboard. Release the control key. If you do not see .jpg, .gif, or

.png at the end of the URL, you will need to select a different image. This should match the URL

from the tab that displayed the image (refer back to step 6). Select “Insert” after pasting. If it does not

post to your site, it may be copyrighted, so select another image.

9. Remember to “caption” your picture. Clicking on the photo also opens up a settings dialog box that you

can use to make further changes. Be very specific with your description and remember this does not

have to be a complete sentence. Refer to your textbook and/or the example site to see captions in use.

Notable controls:

Link: This option turns the image into a link. We

cover links later in this guide.

Lightbox: If you turn this on then any visitor who

clicks the image on your site will be shown a larger version.

Spacing: Makes minor adjustments to the amount

of white space around the picture.

Caption: Lets you add a basic text caption under

the picture.

Advanced: Allows you to adjust (or turn off / on)

the border around the picture.

The size of a picture will vary after upload, but it may be a different size than you'd like and will often be as wide as the entire site.

You can alter this, though; hover over the image and a blue box in the lower right corner will appear, which you can click and drag to adjust the image’s size.

And the Edit Image button will open a simple image editor, where you can add basic effects, rotate, or crop your image.

Once you've made any changes click OK. If you don't like the changes you can click Crop again to readjust or click the grey Cancel button to drop out of the editor.