Adding an Image to Your Folder

Please try to keep your images to under 150KB in size (many LiveModern visitors still use a modem to connection to the internet), and upload only  JPEG (.jpg), GIF (.gif) or PNG (.png) image files. If you use an image editor to prepare your images for publication, the optimal image width for displaying on LiveModern is 500 pixels.

1. When logged into LiveModern, select "my folder" from the blue personalized bar at the top of any LiveModern web page. It's right next to the display of your Full Name.
2. Click on the the add to folder drop down menu, and select Image.
   
3. A new Edit Image page allows you to describe the image:
• Title—Provide a title for your image. The Title will populate the <alt> tag for those browsers that do not or cannot display images. This is entirely optional but may also be helpful if you are uploading lots of images that you use in other places.
• Description—Describe your image. Think of this as a caption. This is entirely optional.
• Finally, the page enables you to select the image to be added. Click on the Choose File button, and select the image from your hard drive or LAN. Once selected, click the Choose button.
4. To upload the image to the LiveModern server, click the Save button on the Edit Image page, and your image will be uploaded. It will be immediately available for viewing. Please confirm that the image is visible to your browser after the save is complete.

When you confirm your image after it is saved, be sure it will display correctly. If not, use a graphics program to modify your image so that others on LiveModern can view it properly. Note that the image is resized and that you can click on it to see the original. Make a note of the URL when the image is displayed properly. You use this URL in your web pages (see below).

If you are uploading lots of images, you might want to create an Images folder in your main folder. When you do, notice that you can also change the view of the folder to produce a photo album. When you have all of your images added to the folder, select the thumbnail view from the display drop down menu in the green bar.

Adding Images to Blog Entries

If you are adding an image to a blog entry, notice that image is an option for you to add to your blog folder:

1. When in your blog, click on the add to folder drop down menu. Image is an option.
2. If you select image, you will simply need to follow the directions above for adding it to your blog folder.
3. If you intend to add a lot of images to your blog over time, you might want to organize them into a separate images folder, which you can create by selecting the folder option.

Adding Images Using the Content Editor

When you are editing content, you will often be using the built-in content editor. This is the green bar with all of the text formatting buttons along the top of the Body Text box (this bar does not appear for Safari users, it's their fault not ours). You can use it to add images:

1. Note that one of the buttons is used to "insert image" (it's a tree). If you click on this button, an Insert Image pop-up window will appear enabling you to find an image to insert into your content.
   
2. Click on the Current Folder icon in the left column. If you have permission to add content to the current folder, you will be able to click on the Upload... link in the center column if you don't have permission, you won't see the Upload... option).
3. Click on the Browse... button and find the image you want to upload on your local hard drive or your LAN. when you find your image, click Open.
   
4. Also enter a Title for your image. Keep it short. This will be the <alt> tag that is used by browsers that do not or cannot display images.
5. Click OK, and the image will be uploaded as well as displayed in the content editor.
6. Click Save when you are finished editing the content.
   

Adding Images to Forum Comments

When you are writing a comment in a forum, you won't be able to add images using the Insert Image into the Current Folder as above. Instead, you can attach images tot he comment, and they will be displayed at the end of the comment:

1. Just under the Body text area, you can browse for an image to add to your comment. Click the Browse... button and find the image on your hard drive or LAN. Click open once you have selected an image.
   
2. Click on the post comment button if this is the only image you want to ad to your comment. if you want to add more than one image, click on the ad another image link.
3. You can add up to three images per comment, and the total size of the images can be more more than 1000kb (1MB). Click post comment when you are done adding images. These images cannot be edited or deleted after you have saved the comment, so be sure you select the right images before posting your comment.
   
4. When the comment is saved, the images will be displayed, one after another, at the bottom of your comment. If you can edit your comment, you can add an image.
   

Displaying Images

When you create content on LiveModern, whether it is a home page, a blog entry, or a forum reply, you can insert images into the body of your page. These images can be stored on other servers (such as Flickr) or on the LiveModern server (as we did above).

To display an image, you will need to code the location of the image in the content you are creating. Often this is done at the same time that you add it to our server. But often it will be done later, or from another server. Unless you know how to do it in HTML, we recommend that you use the built-in content editor.

For images that are stored on the LiveModern server following the directions above:

1. Go to the content that you want to add an image to, and click on the edit tab.
2. Go to the point in the Body text where your image should be displayed.
3. Using the Insert Image button in the content editor, click on a source in the left column: Current Folder if the image is to be found in the current folder; or My Recent Items if you have recently uploaded the image to LiveModern.
4. Find and select the image. Note that the right column will display and image that you select.
5. For Image Alignment it's usually best to select inline.
6. For Size, you can leave it as Original, especially if you have resized your images to be 500 pixels wide, or select an alternative size.
7. Click OK and your image will be displayed. Once you are finished editing your content, click Save.
8. Review how your image is displayed on the page. You may have to edit the content again to make sure the images are displayed correctly, but usually they will be the first time.
   

Alternatively, you can edit your page using HTML to reference images sored on the LIveModern server (you will need to do this if you are using the Safari web browser):

1. Make sure that in your personal preferences your Content Editor is set to HTML (the default is Kupu). You can skip this step if you are using Safari.
   
2. Go to the content that you want to add an image to, and click on the edit tab.
3. Go to the point in the Body text where your image should be displayed.
4. The correct HTML syntax for images stored on LiveModern is:

   img src=/Members/yourloginname/imageid
   

   all enclosed in a tag <> (and including any image folder reference, if used) where yourloginname is your Login Name (case sensitive) and imageid is the actual name of the image (image.jpg).
5. Save the document and ensure that the image appears as you want it to. Of course, there are all kinds of other parts to the img src tag that you could include, such as align, width, alt, etc. but you will need to know basic HTML to include this in your tag.
6. When you are finished editing, you can change your content Editor back to Kupu in your personal preferences.
   

Also note that you do not need to reference LiveModern (http://livemodern.com) in your URL, but you do need to precede the reference with a /. This is called a relative reference: the reference is to the LiveModern site only. If your images are stored on another server you will need to provide an absolute reference to it (http://server.com/image.jpg).

That's all there is to it. Once you do it a couple of times, it really does become very easy to repeat for any number of images.