StikiWeb Wiki - Help.WithAttachments

Welcome: Visitor (Login)      Page History: Help.WithAttachments



Attachmments to Wiki Pages

You can attach files to the pages in this site in much the same way you attach files to email messages. Page attachments are listed at the bottom of the page along with their sizes. Visitors to the page can access these attached files by clicking on the attachment name. Depending on the type of the file it may open in any of several applications or the user may be prompted for a location to save the attachement as a file on his/her computer. How the files will be displayed will depend on how the user's computer is set up. For instance, if the user has Microsoft Word installed files with a ".doc" extension will open in Word. The file "STRANGE_ASCETIC.doc" attached to this page is a Microsoft Word file. Scroll to the bottom of the page and click on the attachment to open it.

Attachment files can also be used in the display of the page itself. Image files attached to the page can be included in the display of the page by putting an "inline link" to the image file in the markup text for the page. Several examples of doing this are included in the sections below.

How to Attach a File

To attach a file to a page you will need to have sufficient permission - based on your login and how the permissions are set up for the page. If you have the appropriate permission level for the page you will see the Attach icon -- http:images/attach.png -- among the command icons on the page. If you don't see this icon, ask the administrator for that page to look at your permissions.

Before clicking on the Attach icon you should save the file you want to attach on your computer and make sure you know the file name, its size in bytes the directory in which it is located. Point your Web browser to the page to which you wish to attach the file and click the Attach icon. The "Attach a File" page will be displayed. It has a field for the name (full path) of the file to be uploaded and attached, and a button labeled "Browse" that will bring up your computer's File Open dialog. This screen also shows the maximum allowed size for an attachment to the page. Make sure your attachment is within the size limit for the page. Click the "Browse" button and pick the file you want to attach. Its name will be populated into the file name field. Click the "Attach File to Page" button to upload the file and attach it to your page. The page will be redisplayed with your attachment in place. Scroll to the bottom of the page and verify that your attachment appears and that it has the expected size.

How to Include a Photo or other Image in a Page


This photo resides in a a file named "ranger.jpg" that was uploaded as an attachment to this page and and referenced in the markup language for the page so it is displayed whenever the page is displayed.

The process of attaching the image file to the page is described above in some detail and is only briefly recapped here. After the image was attached to the page the markup of the page was edited to include the attached image in the page. NOTE: Editing the contents of the page requires a different (higher) level of permission than attaching a file. (Look for the edit icon http:images/edit.png to see if you have the required permission. ) If you don't have the needed permission ask the administrator of the page to look the permissions for the page.

The process for adding an image to a page has four steps.

1: Save the image in a file on your computer.

(My image was called "ranger.jpg")

2: Point your browser at the wiki page to which you want to add the image. Be sure you have permission to edit the page; if not, contact the administrator to be granted permission.

(I pointed my browser at a page named Help.WithAttachments and I have the needed permission.)

3: Upload the image to the page by clicking the "Attach" image http:images/attach.png, picking your file, and clicking "Attach File to Page.

(I browsed to "C:\...\desktop\ranger.jpg" ane clicked the "Attach File to Page" button.)

4: Click the "Edit" icon http:images/edit.png and insert an inline link to the attachment where you want the attachment to appear. If your attachment is an image named "foo.png' then the simplest link to it will be "[@_/foo.png]". The brackets "[ ... ]" identify it as a link. The "at" sign ( @ ) makes it an inline link (as opposed to a link that must be clicked on to view the target). The underscore-slash ( _/ ) introduces a link to an attachment to the current page, and "foo.png" is the name of our hypothetical attached image. For lots more information about links, see the Help.WithMarkup and Samples pages.

(My link to "ranger.jpg" appears in this page as "[@_/ranger.jpg]" and, since I wanted it centered I surrounded it with the markup for a centered table. )

Markup for centered photo from attachment "ranger.jpg"


Attaching content in Zip files.

Most pages have limits to the sizes of attachments, both a limit to the size of a single attachment and a limit on the total size of all attachments for the page. Puttin attachment content in a compressed archive (a Zip file) can help reduce the size of the attachments.

/ Instance...

The image to the right of this text comes from a file named "logobig.bmp" (a Windows bitmap file) that is contained in a compressed archive named "" that is attached to this page. The compressed archive file contains slightly less that 8 kilobytes. The bitmap file inside of the archive (logobig.bmp) contains 33.5 kilobytes -- over four times as big. Attaching a compressed archive containing the image, rather than attaching the image itself, reduced the storage required by a factor of four.

The markup that includes logobig.bmp in the page looks like this:
Most of the elements are the same as the example above for including an image on the page. What's new here is that the name of the zip file is followed by the path inside the zip file to the desired file. (That is, the name of the zip file -- -- is followed by the path to the desired file -- /logobig.bmp .) The other thing that is new is the greater-than character ( > ) that indicates that the image should be displayed to the right of the text and the text should wrap around it. More information on wrapping text around images is available on the Samples page.

If the path to the file in the archive is omitted (as in this link coded as [this link|_/]) then clicking the link will cause the user to be prompted for a location to store the Zip file on his/her computer. The links that all attachments have at the bottom of the page do not have any such path information and will cause Zip file attachments to be downloaded to the users computers and saved as a local file.

Note: Some file types are better candidates than others for using a Zip file to reduce their storage. The bitmap (.bmp) file type for this example was chosen because bitmap files show impressive size reductions when zipped. Other file formats will show little or no reduction in size (.jpg and .png images, for instance, are already compressed and show little reduction in size.) You should also bear in mind that the compressed files are inflated (un-compressed) on the server and sent at their full size over the network. A big image stored as a compressed bitmap may make for a small attachment file but it will still make the page slow to come up over a slow internet connection.

Attaching HTML Pages

HTML coded content can be attached to a page but it requires some special handling. This is because most HTML pages (web pages) are not contained in a single file but consist of a main file (a .html or .htm file) that reference a number of other files for images, styles, scripting, etc. (often .jpg, .gif, .css). These files are also required to display the HTML coded page.

Method 1

Files containing HTML markup can be saved as attachments using one of two methods. If there are only a few other pages you can attach the HTML page and all of the pages it referenes. An example of this is the attachment "LetterFromChris.html" attached to this page. It is a letter from a soldier in Kuwait, coded as a HTML file that references two images (top.jpg and bot.jpg) that capture an illustration from the letter. These two image files are attached as separate attachments.

This link (coded as [link|^_/LetterFromChris.html] opens the letter in a new window. The caret character ( ^ ) before the link target tells the wiki to open the link in a new window. This is usually preferred since most HTML attachments will not have any links leading back to the page to which they are attached. Opening the attachment in a separate window helps keep the page visitor from getting lost -- they can just close the new window and still be on the page they came from.

Method 2

If the HTML page to be attached is complex with large numbers of images, style sheets, scripting files, etc., etc., the page and all its component parts can be put in a compressed archive (Zip file) and served from there. The file "" attached to this page contains a saved page from the National Ocean and Atmospheric Administration's Tropical Prediction web site showing information about Hurricaine Ivan that was bearing down on the Florida/Alabama coastline at the time the page was saved.

The page was saved using the file>save page menu choice in a web browser. The File Name: field was set to "ivan" and the save as: option was specified as "Web Page, Complete". This produced a file named "ivan.html" and a directory named "ivan_files" containing a number of images. This file and this directory were both put in a Zip file named "" which was attached to this page.

This link Ivan (coded as [Ivan|^_/] ) brings up the saved page from the Tropical Prediction Center. The HTML page and all of the images it accesses are served from the one Zip file. Note: the saved copy of the page contains all of the images needed to display this single page but does not contain any of the data for other pages it may reference in hypertext links. The links on the page will still point to their original location (at the NOAA web site) and may well be stale. So, if you click on the thumbnail images of the graphics to view the full-sized versions you will not get what you expect.

It is worth noting that most pages on the World Wide Web contain copyrighted material that may or may not be legal to copy and attach to a wiki page. The NOAA web page was selected for the example because they are unlikely to object to the use of their material. Also note that some web sites use special indirection to make their content difficult to copy -- your web browser's File>Save Page command will not make a reliable copy of such pages.

Method 1 vs. 2

Both methods have their advantages. Method one attachments do not require the path into a zip file and so the structure of the links to bring them up is simpler. (Clicking the name of the attachment at the bottom of the page will bring up a Model 1 saved HTML attachment.) Model 2 saved HTML attachments require a more complex link to get to the content but they are tidier and easier to work with.

   LetterFromChris.html (4446 bytes)
   STRANGE_ASCETIC.doc (21504 bytes)
   bot.jpg (21330 bytes) (48791 bytes) (7871 bytes)
   ranger.jpg (66884 bytes)
   top.jpg (40056 bytes)