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.
The simplest and easiest, as demonstrated on the Family Crest page is:
This specifies the image with ID of 7 is to be placed, as is, to the right with text flowing around it. Note that the commands are case sensitive. "fileId" has the second letter i capitalized!
Copy to clipboard
{img fileId="7" imalign="right"}
A slightly more complicated example that we often use is the following taken from the B10DNA page:
We tend to align images in the center of whatever it appears in. And then have them appear as thumbnails which, when clicked, provide a full-screen pop-up of the image in full glory. This is really helpful when the site is viewed on a mobile device. The only thing you need to change in the above is the numeric fileId. We will describe below how to upload an image and gets its numeric ID.
Copy to clipboard
{img fileId="24" thumb="box" rel="box[g]" imalign="left"}
So lets introduce a slightly more complex form using a DIVision command. This helps us control formatting (especially space around the item) a little bit better, We tend to enclose an image in a DIVision because DIVisions have more ability to specify their size and how they interact with the code around them. Key is, by using a "float", the DIV will allow text to flow around it. So for example, here is a common division use:
In this case, we told it to make the thumbnail and DIVision be 300 pixels wide. The DIVision floats left. Meaning it well appear on the left side and text will flow around it. If you do not specify a width, the thumbnail will often be a max of 100 pixels in one of the two dimensions. By adjusting widths and other parameters, we can give more "white space" boundary around the image.
Copy to clipboard
{DIV(float="right" width="200px")}{img fileId="120" thumb="box" rel="box[g]" imalign="center" width="200px"}{DIV}
But often we may want a title or name placard attached to the image. That brings a little more complication into the scenario.
Here we have used a bolded text above the image to give it a title. In Wiki syntax, all spaces and newlines (enters or returns or line breaks) are usually removed. A few indicate something special in special places. For example, in free flowing text, spaces separate words and are kept. The command forces a horizontal space. In our case, added above to help put the text in a better position. %%% is a forced newline or break that then causes the image to appear below the text. We force the text title to center by surrounding it by double colons (::).
Copy to clipboard
{DIV(float="left")}::__Auray and Le Croisic, France__::%%%{img fileId="51" width="200" thumb="y" rel="box[g]" imalign="center"}{DIV}
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:Copy to clipboard
{DIV(float="right" width="400px")}||__((yFull))%%%[https://yfull.com/tree/I-Y4015/|I-Y4015]__|__((FTDNA))%%%Private%%%I-S1990__|__((FTDNA))%%%Block%%%I-A8601__|__((FTDNA))%%%Public%%%[https://www.familytreedna.com/public/y-dna-haplotree/I;name=I-S1990|I-S1990]__ {img fileId="24" thumb="box" rel="box[g]" imalign="center"}|{img fileId="119" thumb="box" rel="box[g]" imalign="center"}|{img fileId="121" thumb="box" rel="box[g]" imalign="center"}|{img fileId="118" thumb="box" rel="box[g]" imalign="center" width="80px"}||{DIV}
|| 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:
Copy to clipboard
__((yFull))%%%[https://yfull.com/tree/I-Y4015/|I-Y4015]__
The 2nd row is composed of images. Here is one of the image entries in the table column:
Copy to clipboard
{img fileId="24" thumb="box" rel="box[g]" imalign="center"}
Here is another example from the B20DNApriv page using a vertical column of images by using only forced line breaks (%%%) and no table:
Copy to clipboard
{DIV(float="right" width="160px")}::__Ytree.net Z1909__::%%%{img fileId="115" thumb="box" rel="box[g]" imalign="center"}%%%::__yFull.com Z1909__::%%%{img fileId="116" thumb="box" rel="box[g]" imalign="center"}%%%::__FamilyTreeDNA Z1909__::%%%{img fileId="114" thumb="box" rel="box[g]" imalign="center"}{DIV}