Uploading Graphics to Your Communities

It's relatively simple to upload images and other files to a community in the .LRN system yourself, once you know the drill. I have outlined the steps for this below, in great detail.

(Don't let the length and number of graphics below scare you...I want to be as thorough as possible to make sure everyone understands the steps involved!)

Before you get started, here are a couple of things to remember:

• You must have admin access to a community to upload graphics and other images.
  
  
• Upload graphics in their final web-ready form...don't upload a 300dpi, 8x11 inch image and expect to size it with tags. That's not only really bad practice, but it takes up unnecessary server space and just generally annoys people.
  
  There are more than a few free and very low cost graphic optimization programs out there...and I'm willing to write something up to get you started if you need that info.
  
  
• If you need changes to a community identity graphic -- the banner, collage, or numbers, let me know.

And thanks in advance to the lovely Monikah Ogando, ACC of Client Creator Community. Her picture is the one being demonstrated here.

Step One

Go to the community to which you want to add graphics. Make sure you are logged into the .LRN system. For this example, I am using the Client Creator Community.

If you have admin priviledges for the community, you will see several additional peach-colored tabs.

Click on the Files tab.

Step Two

When you are in the Files area, you should see several different folders there. Any images that are NOT part of the community identity should ideally go in a separate images folder. I've created one here:

To get into the images folder to upload your graphic, click on the "images" link.

Step Three

In this case, there is nothing in the images folder at this point.

To upload your file, select the add file button.

Step Four

The Add File Screen has two options for adding or changing content. You will be using the Browse function.

To upload your graphic, click on the Browse button.

Step Five

This will bring up a File Upload screen that shows the files on your local drive(s)...or in this case, mine.

Select the file you want to upload and click the Open button in the lower right corner of the window. I have selected the image monikah.jpg.

Step Six

After you have selected Open on the File Upload screen, it will take you back to the Add File page in your .LRN community. The path and file name of the image you just selected will now be in the field.

Scroll down to the bottom of the page and click the OK button (as shown below).

Step Seven

The system will then upload the image from your hard drive, and take you back to the image folder screen. As you can see in this example, there is now one file listed...monikah.jpg (the one we just uploaded).

Success for Phase One...but how do we get it into the the correct portlet?

You'll first need to get the path for the image on the server. To do that, click on the name of the file in question.

Step Eight

This will open the file in your web browser window.

The path, or the location of the file on the server, will appear in the URL field in your browser screen.

Please note again that your screen may look a bit different due to operating system and browser differences. The steps are the same!

Highlight the URL with your mouse, and copy it.

It is very handy at this point to have two browser windows open (or if you are lucky enough to use Firefox or Safari, two tabs) so faciliate easy pasting of the URL into the portlet screen. Have one open to the images folder in the Admin-only file section, and have the second one open to the main page of your community (or wherever you are putting this image), as shown below.

Step Nine

Back in the main screen for your community (you have two windows open, right?), select the portlet to which you want to add the image, and click the Edit button.

In this example, we are adding to the "left banners" portlet that contains the community identity graphics.

Step Ten

In the "Editing Custom Portlet Left Banners" screen (shown above), you'll see the contents of (you guessed it) the left banner portlet in a window.

In the window that contains the contents, scroll down to the bottom of that area. Click in the window to get a cursor in place (in this case, under the community collage).

Hit <enter> once to add some space, and then go back to the tool bar at the top of that window.

Click on the Insert Image button. (As you can see above, it looks like a tiny picture in a frame...)

Step Eleven

After you have selected Insert Image, a new window (the Insert Image window...more of that clever naming scheme!) will open, as you can see on the right.

Paste the path and file name you copied in Step Eight. (This is where having two windows/tabs open becomes very handy!)

Be sure and add something to the "alternate text" field. Not only is it good practice, but the system won't let you select ok until you do! (In this case, I just put the name of the person pictured.)

For this portlet, you don't need to worry about the other fields. However, if you want to incorporate text wrap or a particular placement when working in different portlet, you can specify the alignment or a border.

Click OK.

Step Twelve

After you click OK, it will take you back to the Edit Custom Portlet screen for the Left Banners...and your image should appear!

In this case, I wanted to add some text above the picture. To do that, click into the window above the image to get a cursor, and type in your text. I also centered the contents of the window, but for this portlet that is not necesary due to the fixed size of the the column.

To save your changes, click OK (under the window, as pictured here).

Step Thirteen

You should now be back at your main page now (or wherever you added this image).

And your changes should be there.

Stand back and admire your brilliance!

Final Thoughts

If you discover a missing step, or something is just not clear, let me know. I'm also open to suggestions for additional tutorials.

I'll be working on the information for replacing existing graphics soon, as well as how to insert a graphic from a different server.

Cheers,
Shari

Shari Horne
Web Services Manager, CoachVille