WCSD Insight

Images, Photographs, and Graphics
Photos add much to the interest and visual appeal of sites. They can help with the understanding of activities and programs. Care must be taken, however, to avoid including personal information about subjects. Student photos should illustrate the activity and may not be individual portraits. 

Uploading Images
First, you will need to upload your images from your computer to your site. You will place the images in your files and folders where you will access them when you need them through the apps.

Uploading Images Using Your Files and Folders Directory

Click on the summary tab in the site content manager. The banner at the top should be green and you will see a list of your current pages below.
To the right, you will see the common tools menu. Click on the Files and Folders link.
Inside the Files and Folders navigate to the folder you wish to upload your new images.
Select the green upload button.
Navigate to where your images are stored on your computer.
Select them and click the ok button
Click the black upload button at the bottom of the window.

Add an Image to Your Page Using the Image App
If you have the image app added to your page you still need to have the image uploaded to your files and folders first. Getting in the habit of always uploading your images and documents into the files and folders will make keeping your website up to date a lot easier.

Open the image app on your page
Click on the select file button and choose existing images from the options.
Navigate through your files and folders to find the image you want to use. You can use the slider to increase the images to make sure you select the correct image.
In the alternative text field give a very brief description of your image.
The alignment will allow you to have your image aligned to the right or left of the app.
The border will allow you to set how much space you have around your image. This is not really necessary in the image app as the app will take up a predetermined amount of space on your page anyway.
The resize width and height will allow you to resize the image on your page. Depending on the layout of your page you will have a maximum of 640px available from the edge of the page to the other side. It is best to try to have your images the size you want before you upload them to the site.
Use the keep proportions checkbox to make sure you do not squish or elongate the image.
Make sure you click the screen save button at the top.
Pull up your page and see if your image is as expected.

Add an Image to Your Page Using the Content App
Most of the time when you add an image it will be through the content app. This will allow you to combine images and text together to enhance your content.

Open the content app you want to add your image to.
Place your cursor at the beginning of the line of text where you want your image to show up. Even if you want your image to sit to the right of the page you will place your cursor on the very left. I know this is a confusing part but you will figure it out in the next couple of steps. To the right, you will see two images that will show you an example of where to place your cursor and where your image will show up. You will notice that you place your cursor in the same spot to have your image on the right or left.
In the toolbar at the top of the content editor. Locate the insert image icon. It will be in the second row, the sixth icon. It looks like a picture of a mountain with a moon. Click on the insert image icon.
Select the existing images from the options.
Use the drop-down to the right to find your image. Navigate your files and folders to find the image you want on your page.
After you have selected your image click on the continue button.
In the next window enter a brief description of your image in the alternative text field.
You can use the height and width boxes to alter the dimensions of the image. Your page width is 640 pixels wide so if you set your image to 320 pixels wide your image will take up half of the space on the page. The height will adjust in a ratio to the width to keep your image from being smashed or elongated.
In the alignment drop down you can choose the right or left alignment. It does exactly as it says. Choosing right will have the picture to the right and the text will wrap around it. Choosing left will do the same thing only the image will be on the left and the text will wrap around it. (Note: Images are square even when they do not look it.)
In the border, field enter 0. This will keep the image from having a purple border around it if you decide to use the image as a link. (see below instructions "Use Images for Links" for using images as links)
Click the insert image button.
If you have made a mistake on your placement or the size it is just better to delete the image from your page and start over.
Click the save button to save your work.

Creating Thumbnail Images
On this page, you will see images too small to actually be useful. But to make them big enough to actually see would mean they would take up to much space on my page. So what I have done is created thumbnails of the images and then link those thumbnail images to the larger images. I make the larger images open in a new tab so you can close the tab without closing the page you are on.

Make sure you have all of the images you want to use uploaded into your files and folders.
Follow the above instructions for adding the image to your page only now make the image smaller in width.
Follow the "Use Images as Links" instructions below. You will learn how to make your thumbnail clickable to a larger version of that image.

Use Images as Links
Sometimes you want your links to be very prominent on your page. Using images as a link is a very good way to have that link stand out. Also, you may want to add an image to your page but to make it useful it will be too big to have displayed on your page. You can create a link from your small image to open a larger version of that image.

Instructions are in the links section