Inserting External Images into Your TaskStream EPortfolio

TaskStream is a website specializing in “standards-based instruction, competency assessment and electronic portfolios.” My wife frequently uses it in her teaching credential classes, and that was the motivation for this article.

Since TaskStream only allows one image per portfolio page, in this article I will discuss way to circumvent the system and make your ePortfolio simply dazzling with all kinds of personal images from your teaching experiences!

I will provide you with step-by-step instructions to accomplish this. I will do my best to make this applicable to both Mac and Windows users, and to take into account the fact that there are many different browsers, operating systems, and configurations out there.

STEP 1 – Get some free web space!

Since TaskStream only allows you to easily add one image, we need to host your additional images on another web site. I have chosen Flickr for this example, but if you have a personal web site or web space from your Internet Service Provider, you can use that too. I prefer Flickr to the other online photo depots, but you can use whatever you are most comfortable with.

I originally thought of using the web space allocated by whatever college or university you are attending, but my wife reminded me that the purpose of TaskStream is to have an online portfolio long after you graduate. Hence, I recommend against using your college web space to host your pictures.

Unless you have a Flickr account, go to http://www.flickr.com/signup and sign up for a free account. If you have a Yahoo! account, you can just log in to Flickr with the same information.

STEP 2 – Find the images on your hard drive.

Now that you have established some alternative web space for your personal images, you need to find them on your hard drive and upload them. For the purposes of this tutorial, I will assume you know how to get the pictures from your digital camera to your computer.

Once you have imported your images from the camera to your computer, you need to find out where they actually are on your hard drive. This will allow you to browse to the right folder when Flickr asks which pictures you want to upload. In Windows, they are probably in your “My Pictures” folder, located in your “My Documents” folder. On Mac OS X, your pictures are probably in your “Pictures” folder, which you can access with the alias in the left column of a normal Finder window.

STEP 3 – Upload your images.

Once you have created your Flickr account and have found the images on your hard drive, you’re ready to upload your images.

Log in to Flickr if you aren’t already. Along the right side of the page you will see an “Upload Photos” link. Click on the link. Once the next page comes up, click on “Browse…” to find the images that you want to upload. You can only select one image at a time, but by clicking on the multiple “Browse…” buttons and selecting different images you can upload up to six at a time.

Make sure that the “Public” button is selected under “Choose the privacy settings.” Once you have selected all six of your images, or however many you want to upload, click the “Upload” button at the bottom of the page.

You will now see a “Describe your photos” screen for each photo uploaded. You do not need to enter anything in the text boxes unless you want to, as none of the information will be seen on TaskStream.

STEP 4 – Find the URL of your image.

Next you need to find the URL (Uniform Resource Locator, or “web address”) of the image that you want to post in your TaskStream ePortfolio. This is a fairly simple process, but sounds intimidating at first. Just stick with me and you’ll get through this unscathed.

One you have uploaded your photos, you will end up at a “Your Photos” screen on Flickr. You will see the photos that you have uploaded on this screen. If you don’t just refresh the page and they should show up. Flickr will automatically resize your images, and the image size that you see on the “Your Photos” screen is probably appropriate for your purposes.

Choose the first image that you want to use. Right-click the image (or hold Control on the keyboard and click the image if you’re on a Mac), and select “Open Image in New Window.”

A new window will open up with only the image. At the top of that window in the “Address” text area you will see something that looks like:

http://static.flickr.com/49/119375557_10d058117e_m.jpg

Select all of this text and copy it to the clipboard (Apple – C for Mac users or Ctrl – C for Windows users). Keep this window open and go on to the next step.

STEP 5 – Edit your TaskStream ePortfolio.

Now you can open up TaskStream in a new browser window or a new tab if you use tabs. Don’t close the window or tab with your Flickr images, as you’ll need this in the next step.

Login to your TaskStream account and open up the ePortfolio in which you want to place your images.

Click on the “Add/Edit Work” button at the upper right and your “Content Editor” window will open up.

Click on the “Text” tab at the top of the window.

STEP 6 – Embed the external image.

The next step is to actually embed the image in your ePortfolio. This also is a bit intimidating, but I’m sure you’ll get through it just fine.

Now that you have the “Text” tab open in TaskStream, find the spot where you want to embed your image. Normally you should put your image in between relevant paragraphs, but this is of course entirely up to you.

Once you have found the spot where you will be placing your image, hit the enter key a few times to make some space for the HTML (that’s HyperText Markup Language, the international language of websites) that will tell TaskStream where to look for your image.

At the exact point where you want to place your image, type the following HTML:

Now paste (Apple-V for Mac or Ctrl-V for Windows) the URL (“web address”) that you copied from Flickr in Step 4 directly after the equals sign. You should end up with something like this:

If you have lost the URL and something else shows up when you paste, just go back to Step 4 and copy the URL again.

STEP 7 – Make sure your image shows up.

When you are done inserting the HTML for your image into your TaskStream ePortfolio, click on the “Save and Close Window” button. The editing window should now close, and your image should now appear on your TaskStream ePortfolio.

If your image shows up, congratlations! You can now add as many images as you want to by following the same directions. If your image is not showing up, however, go on to Step 8 for a few troubleshooting tips.

STEP 8 – Troubleshooting

Here are a few steps to follow in case your image does not show up. If none of these work, start over with Step 1. You will most likely be able to solve whatever problem is occuring by following these steps though.

1. Check your HTML on TaskStream. URLs are case-sensitive, meaning that if you have

instead of

you will have a problem. This is probably not your problem though, since you followed the directions and copied and pasted the URL…right?

2. Another frequent problem in HTML is that sometimes erratic spaces get into spots where they should not be.There should be no spaces at all between the < and the > except for the space between img and src.

3. You can put quotes around the URL, but it is not necessary. If there are quotes around your URL, make sure that they start at “http” and end right before the “>.”

4. If none of these ideas fixed your image, go back to Step 4 and confirm that your image is indeed posted on Flickr and that your URL is correct.