How to add an image to your post (work in progress)

Follow these steps to add your image to your post:

1. Create a new Post or Faculty Group Post if you have not already done so
2. Below the Body area, there is an area called Insert an Image
3. Click Browse, find the image file on your computer, then click Upload. After the file is uploaded, you will see a small (thumbnail) version of the image appear in the Insert an Image area.
4. Move the cursor to where you want the insert to happen in the Body area, and click there.
5. Click Insert in the Insert an Image area, and the image will be inserted in the Body area.

By default, what you will get is:

• a 350 pixel wide version of your image
• aligned left, with text wrapped on the right
• with 20 pixels of white space around it.

You can upload as many images as you like and insert them in this way.

You can resize them in the Body editing box by click-dragging on a corner of the image.

More Automatic Sizes Available

Before you click Insert (step 5 above), you have the option of selecting a different size to insert. It is a pulldown called Style, next to the Insert button, and the numbers in it are the width in pixels that you want (there are also words like small, medium, xlarge to help).

Going further

If you want to make more serious changes to the image, you can click on the image to select it, and then you could:

• click on the Align Right icon, and it will go there instead of left;
• click on the Tree icon which gives you all the options for styles, such as aligning, padding, etc. To use this more advanced feature, you will need to know some CSS, the language for styles. See a good CSS tutorial for more information.

Side by Side Images, one way to do it using a table

If you want images to be side by side in your post, that can sometimes be a little tricky. One way to do it is to create a table in your post to hold the images (and any text you might want to place with the images).

First, create the table:

1. Click in the Body area where you want the images.
2. Click on the Table icon (grid with pencil)
3. In the window that pops up called Insert/Edit Table, set
1. columns (number of columns you want): 2
2. rows (number of rows you want): 1
3. Cell padding: 10 (to give you a little space around your pix)
4. Click Insert.

Then, upload the 2 images, using the instructions above (1-3) for adding an image to your post. When you arrive at step 4 (Move the cursor to where you want the insert to happen in the Body area), read the hints below:

1. In the Insert an Image box, pull down Style to the width that you want for your leftmost image. Note: you only have 800 pixels total width of usable space for your 2 images and the white space padding around them. It's not a good idea to go over that.
2. Click in the left little table box in Body. 
3. Click Insert  in the Insert an Image box.
4. Repeat steps 1-3 for the right image using the right little table box in Body.

Documentation prior to Fall, 2012

Note: this documentation below has been superseded by the instructions above, but remains for reference.

Before you try to add an image to your post on Serendip, prepare your image for the web. You can use an image editing program, such as Photoshop, iPhoto, Paint, Picasa, etc. If you do not have an image editing program installed on your computer, there are many free programs available online. Your image should be no more than 500 pixels wide so that it will fit in the content area of your post. The file size of your image should be less than 200 KB so that your post loads quickly. A resolution of 75 pixels/inch is suitable, but don't worry about changing the image resolution if you don't know how to. Once you are done editing your image, save it as JPEG, JPG, PNG, or GIF so that it is able to be viewed online.

Follow these steps to add your image to your post:

1. Create a new portfolio/blog entry or group post if you have not already done so
2. Click inside the Body area where you want the image to be placed
3. Click on the Insert/edit image icon (it looks like a tree in a box). A small window will open
4. Under the General tab, click on the icon next to the box that says "Image URL". Another window will open.
5. Click on the button at the top that says "Upload". Click "Browse" and find the image file on your computer. Click on the "Upload" button
6. You should now see your image in the File Browser window. Select your image and click on the "Insert File" button at the top of the window
7. You can type in a description for your image under the General tab of the Insert/edit image window. The text for the title will be displayed as a mouse-over caption on your image, so you don't have to add a title if you don't want a caption
8. Click on the Appearance tab to change the alignment of your image. Choose an alignment -- text will flow around the image based on this choice
9. Click the "Insert" button at the bottom of the Insert/edit image window. Your image should now appear in your post

I added the image to my post but the image isn't where I want it to be. What should I do?

• Generally, selecting the image and dragging it around doesn't work. Sometimes moving the text is easier than moving the image to get the image in the right place.
• If the image isn't aligned properly (e.g. maybe it is aligned to the left and you want it to be centered), you don't necessarily have to figure out how to align it in the image editing window. Select the image and click on one of the align icons.
• If you decide you want the image to be smaller or larger, you can select the image -- arrows should appear around the border of the image. Click on one of these arrows and drag it until your image is the size you like.

How do I make my image change when the mouse moves over it?

1. While editing your post, click on the Insert/edit image icon (it looks like a tree in a box)
2. Under the Advanced tab, check the box for Alternative image
3. Click on the icon next to the "for mouse over" box and follow steps 5-6 above
4. If you want the image to remain as the alternative mouse over image, click the "Insert" button at the bottom of the Insert/edit image window
5. If you want the image to return to the orignal image once the mouse is not over the image, stay in the Insert/edit image window. Under the Advanced tab, click on the icon next to the "for mouse out" box and follow steps 5-6 above
6. Click the "Insert" button at the bottom of the Insert/edit image window

To create a full page of images, select "Image Gallery" from the pull-down menu under "Create Content" @ the top of the page.