Image Formatting

Adding an Image to a Wiki Page

There are many ways to add an image to a wiki page. They all first start with uploading the image to a File Gallery within the site.






Note: a bug in the code causes %%% to be converted to normal newlines during WYSIWYG editing mode. Which is why we have to turn off the WYSIWYG editor and require you to edit actual text with embedded wiki code. Is a shame but not something that has been fixed in 15 years now.

Upload a File

To display an image, you must first upload it to the Wiki system. Go to the File menu item in the top bar and List Galleries. There are a number of galleries shown. The first two are containers for images put in DNA Grouping (e.g. B20DNApriv) or Family Branches (e.g. B20) pages. Click on the one that represents the page you want to add an image too. Then click the upload link at the upper left. You can drag and drop your image to the "drop files" box there OR click choose files to get a standard OS file explorer pick box to go find your file to upload.

Once uploaded, in small print below the image, you will see the file # designation. Something like DL165 or simply 165 or similar. It is those numbers that are the unique file id you need in the {img} directive. Or go back to the gallery and see your file there. If you hover over the file name, you can see the file URL in the lower left of the browser. It will end with the ID. Or click on the wrench and then the first line in the pop-up called "display". The image will display and the URL in the browser will give that same link. You can edit the file properties under the wrench to give it a proper name and description. We often title the files to start with the main page they appear in.

More complex image formatting

Here is a more complex example as used there but taken here from B00DNA:
This one happens to be more complex in that it embeds a table inside a DIVision block. So first it defines a DIVision that is 400 pixels wide and floats right. Inside the DIVision block specification, we see a double vertical bar (||). We are using a table to include multiple images in a single row.

|| is the way you indicate a table start. That first row immediately follows with single '|' separating rows. A row ends with a return / "enter" key to break it. This is one of the very few places in Wiki syntax where a return / "enter" has any meaning other than removed white space. Each column entry in the first row is a multi-line row header for the image that is put in the row below. The %%% is the syntax in Wiki to force a return / 'enter' to occur (that is, line break). Currently, there is a bug in the software where %%% is stripped out during an edit and replaced with a keyboard 'enter'. But a keyboard enter or newline is thrown out by the Wiki software (or in this case, because in a table, interpreted to mean end of a row). You end a table with a double vertical bar (||) after the last column entry.

We use a table because we want several images to appear next to each other inside a single division. The first row is the image titles and the second the actual images. We could create a single column but would not necessarily need a table for that. Just lots of %%%.

Here is one of those first row column entries giving a title to an image:
Two underscores indicate the start/stop of bold text. ((wikipagename)) is the way to link to another Wiki page. %%% is the forced line break just described. [url | text] is the way to make an off-site link to another page out in the WWW.

The 2nd row is composed of images. Here is one of the image entries in the table column:
which we covered already above in the introduction about including images.

Here is another example from the B20DNApriv page using a vertical column of images by using only forced line breaks (%%%) and no table: