Images Cheat Sheet

By now you've made a basic page, now we'll add some images. Always start by logging in to the web site. Once you are logged in, you will see an Edit button on any page that you've created.

In the Body section, decide where you want to insert your picture and click put the cursor there. Then, click Add Image.

The image wizard pops up and shows you any images that you have already uploaded. You can also select from all of the images that other people have already uploaded to the website. Click Upload to upload a new image.

A Title is required. Click Browse to select your image. You don't have to fill out anything else on this screen.

Scroll down to the very bottom and click Save

Now you will be presented with some options.
Title: Optional. Anything you put here will show up as a bold caption under your image.
Description: Optional. Anything you put here will show up as regular text under your image.
Size: The website can resize your image for you. Your options are Original, Thumbnail, Preview, and Other.

  • Original: No resizing will be done.
  • Thumbnail: Picture will be made very small (icon size).
  • Preview: Picture will be made smaller, roughly twice the size of a Thumbnail.
  • Other: Enter custom dimensions for your picture.

Alignment: Where the image will be placed relative to the screen. Your options are left, right, center, and none.
Link: What happens if you click on the picture.

  • Not a link: Picture is not clickable.
  • Link to image page: You'll probably never use this.
  • Open in popup window: Try not to use this, popup blockers might interfere with this.
  • Go to URL: Make the picture a clickable link to another web page. A Link box will appear and you can enter the address of the linked page.

Click Insert and the website will insert a piece of code where the picture should be. Click Save and you should see the picture inserted on to the page. Notice that the website automatically wraps the text around the picture. Also notice that this picture is clickable, and goes to www.nick.com when clicked.

Let's take a look at that scary piece of image code for a minute.

[img_assist|nid=2918|title=This is the Title|desc=This is the Description|link=url|url=http://www.nick.com|align=right|width=150|height=221]

The whole thing is enclosed in square brackets [ ], and there is a "|" (vertical bar or pipe symbol) separating the different pieces.
img_assist tells the website that it's an image.
nid=2918 tells the website where the image is located. If you want to make changes to the image, or delete it from the website, you can use the nid to do it by going to www.chariho.k12.ri.us/node/2918 and clicking Edit

title=This is the Title (self explanatory)

desc=This is the Description (self explanatory)

link=url Tells the site that the picture is a clickable link.

url=http://www.nick.com Tells the site the address of the link.

align=right Alignment can be left, right, center, and none.

width=150|height=221 Size of the picture in pixels. You can change these numbers and the picture will be stretched or squished to fit.

This information is good to know because it lets you make minor formatting changes to your image right here instead of having to start over with the Add Image wizard.

You can also cut and paste this piece of code in a different place to move your image around within the body of the page.