Images

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.

Add an external image from the internet

Use this code in a page, replacing URL with the full link to the image:
<img src="URL">

To add an external image from the internet.

Add a local image from your hard drive

Use this code in a page, replacing PATH with the full path to the local file you'd like to display:
<img src="file://PATH">

To add a local image from your hard drive.

Embed an image in the wiki

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.

Info 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.

Replace NAME in these instructions with the name of your image:

From the menu

  1. Click the New Page link in the menu.

  2. Type Image::NAME into the box that comes up. This will bring up the image embedding interface.

  3. Browse to the image on your computer.

  4. Click the Embed button.

From any page

  1. 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.

  2. Click the Save icon in the navigation bar to save the page.

  3. Part of the include link you just created will be red, indicating that the image doesn't exist yet.

  4. Click on the red part of the link to launch the embedding interface.

  5. Browse to the image you'd like to embed.

  6. Click the Embed button. You'll be taken to the Image::NAME page with your image embedded in it.

Use an embedded image

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.
  1. Create a new page or open an existing page in the editor by clicking the Edit icon in the navigation bar.

  2. Create an include link for an already embedded image. There are two ways you can do this:

    1. Use this code wherever you like:
      [[Include::Image::NAME]]
    2. Or click the editor's Image button and type in the name of the image.

  3. Click the Save icon in the navigation bar to save the page. The image should now be where the include link was.

Use a data:URI image

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">

Example:

<img src="data:image/png;base64,R0lGODlhBgAFAIABAAAAAP///yH5BAEAAAEALAAAAAAGAAUAAAIJDGJ4ic1qgAwFADs=">
Result:


A famous online service to create such URIs is The data: URI kitchen. The best encoding to be used in WoaS is base64.

Create a data:URI image button

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">