Adding Images to Your Blog
New enhancements to the blog make adding images very easy.
SonicSpider has added a new enhancement to the SonicWeblog editor to make adding images to your blog entry as easy as possible. There are 5 simple steps:
- Place curse in location where you want the image.
- Click the "Image" icon in the toolbar (loads Image Properties dialog)
- Click the "Browse Server" in the Image Properties dialog
- Upload Image
- Select in Browser and image is placed in blog entry.
The rest of this article will guide you on a detailed example of each of these steps. It is advisable that you print this blog entry and have it available while you try this out on your blog. Once you have gone through the process, you will find the above list a good reminder of the process. (Cut it out and place on monitor?)
The tool bar for the blog editor has many common "Word-like" functions, as icon images. Place your cursor over each icon and a "tool tip" will pop up to tell you the purpose of that tool.
The icon we are interested at this time is:
| Tip: Click the "Fit window" icon (next to the "Source") to have a full page editor. |
Click the Image icon to load the Image Properties dialog:
This dialog allows you to control the look and size of your image, wrap it in a hyperlink and other advanced features. We will JUST focus on the basic placing of images in this tutorial.
| Tip: Be sure to crop and size your images before uploading. Large images from a camera will slow down the viewing of your blog and will eventually increase the cost of storing those images. There are many tools available for sizing and optimizing images for the web. |
Next you need to upload your image to the server. To do that you need to click "Browse Server" to load the Server Browser dialog:
Each Blog has a folder on the server. Once you upload an image it will be there to be used in other "blog entries" in your blog. Because of that you might want to "preload" a number of images that you need while you have this browser up. At this time will will be just working with one image.
Therefore we will be using the "image loader" tool bar found on the bottom of the browser.
To upload an image you need to "browse" your local machine. Click "Browse" and a small file browser from your operating system will be opened (Note: On windows that is "Explorer" and on a Mac it is "Finder", for example)
| Advanced Tip: Generally, it is a good idea to create a folder for your "blog images" on your local machine BEFORE you begin the upload process. This will insure that you have sized and optimized these images from their originals. It also will help avoid accidentally altering the originals. |
Once you have found the file in the "file browser" select it and it will be entered into the edit field next to the Browse button. Once you have your file entered, click the "Upload" button and it will be uploaded to the server.
You will notice that it has suddenly appeared in the larger browse window.
Next click the image you just uploaded from this list. It will then be placed into the Image properties dialog.
You will notice that the "full" path to the image has been inserted. Click "OK" and the image will be place at the curser in your blog.
That completes the basic process. Next are a few tips and suggestions that will make the process more efficient and help make the results look better.
| Advanced Tip 1: -Use the "Alternative Text" entry to allow "text readers" to see your image. Make the text descriptive of the image. This will also make your website "Accessibility" compliant |
| Advanced Tip 2: -Keep images as small as possible. Use an image "optimizer" to insure that the resolution is ONLY as good as is required for that size. |
| Advanced Tip 3: -If you understand HTML click the "Source" button to add special enhancements to your blog entry. |
|
Advanced Tip 4: -You can use images from any source. If you have an image on your main website. Just "right click" the image on the website and select the menu item "Copy Image Location'. This will place the URL of that image into your clipboard and now you can paste it in the URL field of the Image Properties dialog. This might look like: http://isp.netscape.com/cppops/06/20051006_00005/i/britney_dark_95.jpg where I did this in the Netscape home portal on an image of the ubiquitous Britney Spears. Be forward! Other websites can remove their images, therefore be careful with this technique. |