UPDATE: A new image browse/upload/insert capability has been installed. The older methods below this update still work, but here's the new and improved way:

UPLOADING IMAGES:

When you create a new article, etc., or a new comment, you will see the editor buttons across the top of the text box.

Click the "image" button.

1. On the pop-up image link form, click the "browse" button.

2. This will open up an image/file browse dialog showing all the files/images you have uploaded. If the image you want to include is not shown:

- Click the "upload" button.

- Click the "choose file" button to open a file browser window on your computer.

- Locate the file on your computer that you want to upload, highlight it, and click "open".

- Click the "upload" button to upload the file. Once the upload is complete you can choose more files to upload, or close the upload form when you are finished.

3. The uploaded file will now appear in your user file browser window. Highlight it and click the "send to editor" button.

4. The file/image info will be populated in the image form. Make any desired changes or accept the defaults, and click OK to insert the file/image link.

Note that this works with comments as well as blog posts, events, etc. wherever the editor buttons appear.

(NOTE: The editor "link" button has similar capabilities for uploading and embedding links to other types of files such as PDFs.)

MAKING A SHADOWBOX IMAGE:

A "shadowbox" image is a larger image (up to 1024 x 768) linked to a "preview" image that will fit on the front page up to (520 x 520). The larger image is displayed in a popup window when the preview image is clicked.

To create a shadowbox image:

1. Upload your large image as described above, except click the "create preview image" checkbox before clicking upload. This will upload your image and create a smaller sized preview image with the file prefix of "preview_".

2. Insert the "preview_" front page version of the image link as above.

3. The image link will be highlighted. If it isn't, highlight it.

4. Click the "Shadowbox" editor button. This will open a form for adding the shadowbox link. The preview image link will automatically show in the link text.

5. Click "browse", locate the large version of the image, select it, and click "send to editor" as above. A link to the large version will be placed in the shadowbox link URL.

6. Click OK to insert the shadowbox link wrapped around the preview image link.

NOTE: If you prefer to have a word or phrase open your large shadowbox link, skip the steps for creating, inserting and highlighting a preview version link and just type in the text, highlight it, and click the Shadowbox button, or just click Shadowbox and type in the text you want for the text link.

MAKING A SHADOWBOX GALLERY:

1. Create a shadowbox image link as above, except put a gallery name between the brackets in the "shadowbox[]" variable, for example "shadowbox[paris]".

2. Un-select the just created shadowbox link, move your cursor to the end, and create additional shadowbox image links with no text making sure to include the gallery name in the "shadowbox[]" variable. Insert the additional image links immediately following the preview shadowbox link, and continue inserting with no blank lines between links.

When front page preview image is clicked, it will pop up the first image and display a slideshow of all the images tagged with the gallery name you specify. Users can navigate through the slideshow using the left and right arrows and the spacebar to pause, or using the buttons on the screen.

OLDER METHODS:

To include photos or other images such as charts or graphs as part of your blog posts, use the 'file attachments' link on the blog post creation page.

Uploading images to include in blog posts

To upload an image such as a photo, illustration, chart/graph, etc. that you want to include in a blog post, use the "file attachments" feature on the blog post entry form. Note that these images do not appear in the image/photo gallery or anywhere else except where you explicitly place them.

On the create blog post form, expand the 'file attachments' section that appears under the blog post text box. Click the 'browse' button to locate the photo/image you want to upload on your local hard drive. Then click "attach" to attach the file to the post. (You can attach multiple files/photos.)

Then, you can uncheck the "list" check box so the attachment is not included in the list of attachments. Instead, you want to copy the url of the image file that is displayed in the list of attachments and include that in an HTML 'img' tag in your post. For example:

<img src="http://www.knoxviews.com/files/photo.jpg">

Or:

<img src="/files/photo.jpg">

Notes:

Your images are uploaded to folder 'files'. Images in this folder can be referenced on the KnoxViews.com site as simply '/files/photo.jpg', or with the full http path.

You may upload multiple images from the image upload browser window. After the first image is uploaded, simply click the 'browse' button to locate the next image to upload and repeat as necessary.

Images that appear on the front page must not be wider than 425 pixels to avoid disrupting the layout of the main/front page. Images appearing in the "read more" full page for a single post after the break tag must not be wider than 640 pixels.

You can use the "width=520" property for images on the front page. You can also wrap the image tag with an anchor tag that has a link to the full image so users can click on the front page "thumnail" to see the full image.

For variations on placement of your image in your blog post, modify the example <img> tag as follows:

To align the image on the right side of your post, with text flowing on the left, use:

<img src="/files/photo.jpg" align="right">

To align the image on the left side of your post, with text flowing on the right, use:

<img src="/files/photo.jpg" align="left">

When using "right" or "left" alignment, your images should be no wider than 150-200 pixels for proper appearance.

Uploading images to include in comments

To upload images to include in comments, use the 'upload file/image' function in the navigation pane. This works similarly to making a blog post, but does not show the image or images on the front page. Instead, you can copy the URL and include it in an 'img' link as described above.

Using the "shadowbox" enlargement/gallery feature

The "shadowbox" feature that lets you include a larger size pop-up image with your photos and create a gallery/slideshow. To use it:

1. Save the "front page" version of your photo with a width not exceeding 520px.

2. Save a second "large" version of your photo, recommended max width of 1024px.

3. Create a new post, attach the two image files.

4. In the body of the post, embed an image tag for the "front page" 520px max size photo like this:

<img src="/files/myphoto_sm.jpg">

5. Wrap the image tag with a link to the larger size photo using the special keyword 'rel="shadowbox"' like this:

<a href="/files/myphoto_lg.jpg" rel="shadowbox"><img src="/files/myphoto_sm.jpg"></a>

That's it. Clicking on front page photo will open a pop up with the larger version.

P.S. Note that you can just upload the large version if you want, and use it as the front page small photo with the 'width' attribute, like this:

<a href="/files/myphoto_lg.jpg" rel="shadowbox"><img src="/files/myphoto_lg.jpg" width="520"></a>

The disadvantage is that the browser does the resizing, and the image quality will probably not be as good as your photo software.

You can also create a gallery:

1. Follow the steps above to create the first photo in the gallery, i.e. the one that will show on the "front page."

2. Modify the 'rel="shadowbox"' tag to include a gallery name in brackets, for example 'rel="shadowbox[vacation]", like this:

<a href="/files/myphoto_lg.jpg" rel="shadowbox[vacation]"><img src="/files/myphoto_sm.jpg"></a>

3. Attach additional large size photos for your gallery.

4. Create empty link references for each photo referencing the same gallery name in the "shadowbox" tag, like this:

<a href="/files/myphoto2_lg.jpg" rel="shadowbox[vacation]"></a>
<a href="/files/myphoto3_lg.jpg" rel="shadowbox[vacation]"></a>
<a href="/files/myphoto4_lg.jpg" rel="shadowbox[vacation]"></a>
etc.

(Note: You may need to remove line breaks at the end of each link reference so they all run together in one big paragraph.)

An example (click image to start slideshow):