Wiki on a Stick offers various ways of using images in your pages. You can link to local image files on your drive, remote image files, or embed image files into the wiki.
Use this code in a page, replacing URL with the full link to the image:
To add an external image from the internet.
Use this code in a page, replacing PATH with the full path to the local file you'd like to display:
To add a local image from your hard drive.
This wiki provides an interface for embedding images. Each image will be given its own page, which you can use in an include link to insert the image anywhere in this wiki.
Replace NAME in these instructions with the name of your image:
Embedded images are encoded with Base64 and are 33% bigger than the original files. Since this wiki is a single file, excessive use of images will slow down performance.
It is recommended to keep the extension in the image name because some browsers infer the mime type of the image from the extension.
- Click the New Page link in the menu.
- Type Image::NAME into the box that comes up. This will bring up the image embedding interface.
- Browse to the image on your computer.
- Click the Embed button.
- Create an include link for a new image by typing [[Include::Image::NAME]] into a page, or click the editor's Image button and type in a name for the image.
- Click the Save icon in the navigation bar to save the page.
- Part of the include link you just created will be red, indicating that the image doesn't exist yet.
- Click on the red part of the link to launch the embedding interface.
- Browse to the image you'd like to embed.
- Click the Embed button. You'll be taken to the Image::NAME page with your image embedded in it.
Once an image is embedded, you can use the same include link you used to add the embedded image to include the image anywhere in the wiki.
- Create a new page or open an existing page in the editor by clicking the Edit icon in the navigation bar.
- Create an include link for an already embedded image. There are two ways you can do this:
- Use this code wherever you like:
- Or click the editor's Image button and type in the name of the image.
- Click the Save icon in the navigation bar to save the page. The image should now be where the include link was.
It is always better and advisable to embed an image instead of using a data:URI image, mostly because embedded images can be reused inside the wiki and do not garble the edit window when editing the page.
However if you want to use anyway a data:URI image you can do it by directly adding the XHTML snippet:<img src="data:image/EXTENSION;ENCODING,ENCODED_IMAGE">
A famous online service to create such URIs is The data: URI kitchen
. The best encoding to be used in WoaS is base64.
Use this code in a page, replacing YOUR_MESSAGE with the message to be displayed and DATA_URI_GOES_HERE with the data:URI of your image:<input type="image" onclick='alert("YOUR_MESSAGE")' src="DATA_URI_GOES_HERE">