Adding Pictures

Before you can display a picture with a story, you need to make the image available to your Manila website by posting it to your Manila account. Manila can't find pictures saved just on your computer. (We're assuming you already know how to save a picture as a file on your computer or on a floppy disk.)

1. In the Editing mode, click on the Pictures link on the Editors Only menu. You remember the Editors Only links, right? It's at the top of your page and looks like this-or something similar:
2. Click on the Create a New Picture link. Then click Browse (next to the Choose a GIF or JPEG file) and navigate your hard drive to the picture you saved and click Open. The Create a New Picture screen might look different on a Macintosh computer.
3. Type a short, descriptive title in the Title field (ex. SCC students). It's important to keep the title short because this title is what you will type whenever you want to add a picture to a story (in the next step). If it's a long convoluted title, you may start to develop carpal tunnel syndrome! This title does not have to match the file name of the image on your hard drive. Remember to keep the your Manila folder on your hard drive up-to-date with files for your website. Edit the file names to match your picture titles. Don't add a space after the last letter in a title.
4. Type additional descriptive text in the Text field. This step is important, because it ensures that the image is accessible. In addition to the title, this descriptive text becomes a tool tip and is what screen-reader software "reads" (via a simulated computer voice) to blind and visually-impaired students. Think about what would help the student understand what the picture is about, without having to wade through excessive verbiage. "Scoop tells a story to SCC students" is much better than "Scoop story."
5. Click on the Post New Picture button at the bottom of the page.

Displaying a Picture

Once you have added a picture to your Manila website (which you learned in the previous section), you can insert it into your story.

1. Navigate to the story where you want the picture displayed. (Use the Editors Only menu.)
2. Click on the Edit this Page button at the bottom of the content field.
3. Identify the location where you want to insert the picture. Move the cursor to where you want to show the picture and click the mouse button to insert the cursor.
4. Type the picture title in double quotes. This is the short, descriptive title you assigned the picture when you added the picture to Manila in the previous section, not the file name of the image as it is on your hard drive. Using our previous example, you would type "SCC students". NOTE: If you forgot what you titled a picture, open the Pictures in a new window. Click on the picture you want to add. It will show you the picture and, right below it (in teeny tiny print), it will say something like:
   To include this picture in a page, type "SCC students", including the quotes.
5. Click on the Post Changes button at the bottom of the page and you should see the fruit of your labors.

Maybe you want to position the image in a specific way with your content. Here are some tips on how to align your pictures. By default, pictures are added at the left margin. Your only choices on location is right, center, or left aligned. To center a picture, use the toolbar on the Edit Story view to select the picture file (identified by title with quotes) and click the Align Center button. Then click the Post Changes button. If you want the picture aligned to the right margin, clicking the Align Right button will push it over to the right side.

Deleting a Picture

NOTE: This is identical to the Easy way of deleting a story. If you're already familiar with deleting stories, skip this part! (Unless you like the deja vue experience!)

So, you are completely done with a picture and you're tired of seeing it in your story list. You're pretty sure you're never going to need it again, so you want to delete it. (If there's a possibility that you might use it again, you should probably copy and paste the picture into a file and store the file on your personal computer.)

1. In the Editing mode, click on the Admin link on the Editors Only menu.

   You'll see a list of Stories and Pictures (with your Stories at the top of the page and, when scrolling down, your Pictures at the bottom of the page). Notice that they are organized in reverse date order, with the most recently added pictures/stories listed first.

   (If you have lots of stories/pictures, you'll see "More: 1 2 ..." at the bottom of your list. If you click on the 2, you'll be brought to a second page of your pictures.)

2. Mark the pictures you want to delete by clicking the box to the left of the picture's title. It will put a checkmark in the box. If you click the checkmark again, it deselects the picture.
3. Click the Delete button at the bottom of the pictures list, and you're done!

WARNING: This is undoable. Once you click the Delete button, there is no going back. Further, there is no confirmation screen to make sure you want to delete that (or those) picture(s).

The workshop images are available at http://scc.losrios.edu/~manila/practice_files.

Flash animations You can include Flash SWF files in a Manila site and display them on a story page with the URL of your uploaded file by including the HTML code embed tag:

<embed src="http://web.scc.losrios.edu/files/instrdev/idanimationintro4.swf" width='600' height='200' alt="interactive image with links to office hours or staff"> </embed>

Sacramento City College
3835 Freeport Boulevard · Sacramento, California 95822
This page was last updated: Saturday, March 29, 2008 at 10:21:18 AM