Every BlogHarbor weblog comes with a filesystem -- a space in which you can store files of any type: pictures, sounds, Flash files, Word or Excel documents and so on.
You access your filesystem via the File Manager, which allows you to:
- View the files in your blog's filesystem
- Add new files to your blog's filesystem
- Change the name of any file in your blog's filesystem
- Delete any file from your Blog's filesystem
You get to the File Manager by clicking on the "File Manager" tab in the Navigation Bar of your Control Panel. The File Manager page is shown below:
The File Manager. Click the picture to see it at full
size.
Including Pictures in Your Articles
There are a number of ways to include a picture in your article. One way consists of these two steps:
- Upload a picture to your blog's filesystem
- Include that picture in your blog entry
Uploading a Picture to Your Blog's Filesystem
The Upload New File box on the File Manager page contains all the controls you need to upload a picture to your filesystem. Click the "Browse" button to select the picture on your computer that you wish to upload:
A window titled "File Upload" will pop up. Use this window to select a picture to upload, then click the "OK" button.
Once you have selected the picture, click the "Upload" button, as shown below:
You will have a short wait (the length of which depends on the size of the picture), after which the page will reload and the file you just uploaded will appear in the File and Directory Listing, as shown below:
The File and Directory Listing, showing the file
you just uploaded. Click the picture to see it at full
size.
Now that the picture is in your filesystem, it's time to post a blog entry containing it.
Posting a New Entry from the File Manager
Every file in the File Manager has a "Blog This" icon in its row. Clicking this icon will take you to the "Post Entry" page and include the file within the entry.
Let's do this. Click the "Blog This" icon for the file you just uploaded, as shown below:
Clicking the "Blog This" Icon. Click the picture to see it at full size.
You will be taken to the "Post Entry" page. If you look at the "Article Body" section, you'll see that the picture has already been automatically included in the entry!
The "Post Entry" page after clicking the "Blog This" button. Click the picture to see it at full size.
You can now write your blog entry around the picture, putting text before or after it. When you publish the entry, it should look something like this:
The published entry, complete with picture.
Including Multiple Pictures in Your Blog Entries
The "Blog This" button in the File Manager works well for including a single picture in your blog entry. What if you want to include more than one?
Adding many pictures to a blog entry is made easier if you use two browser windows. It's even easier if you have a browser with a tabbed interface, like Firefox or Opera.
Adding the First Picture
Upload your pictures to the file system. Once that's done, right-click on the "Blog This" icon for the first picture you want to include. A pop-up menu will appear.
If you are using Internet Explorer as your browser, the item you want to pick is "Open Link in New Window". Clicking on this menu item will open a new window, which will contain the "Post Article" page; the "Article Body" area will contain the image you selected:
Click to picture to see it at full size.
If you are using a tabbed browser like Firefox, choose "Open Link in New Tab". Clicking on this menu item will open a new tab, which will contain the "Post Article" page; the "Article Body" area will contain the image you selected:
Click to picture to see it at full size.
Here's what the "Post Article" page will look like:
Click to picture to see it at full size.
Adding Subsequent Pictures
Since clicking on the "Blog This" icon causes a new article to be created, you can use it only once per article. Luckily, we have the "Insert Image" button, which is in the toolbar of the "Article Body" area. Click on it causes a pop-up window to appear; you enter the location of the picture into it.
The two-window (or two-tab) approach makes it simple to add multiple pictures to a blog entry. One window (or tab) contains the "Post Article" page, into which you insert the pictures, while the other contains the filesystem page, from which you will copy the locations of the pictures.
Let's add a second picture to the article. Do this by going to the tab or window containing the filesystem page and copy the location of the second picture.
Here's how you do it using Internet Explorer:
...and here's how you do it using Firefox:
Now that we've copied the location of the second picture, let's go back to the "Post Article" page. Move the cursor to the location in your article where you want to put the second picture and click the "Insert Image" button:
Click to picture to see it at full size.
A pop-up window will appear. Paste the location of the picture (which you copied from the filesystem page) into the text box marked "Enter the full URL of the image". Click the "Submit" button.
Click to picture to see it at full size.
The window will disappear. You will see that the Article Body area now includes the second picture:
Click to picture to see it at full size.
You can repeat this step for as many pictures as you please.
