Loading...
 

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.

103x130 Logo with transparent border of William le Hore Seal (founder of Pole Hore family, Wexford, Ireland) The simplest and easiest, as demonstrated on the Family Crest page is:
Copy to clipboard
{img fileId="7" imalign="right"}
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!

An annotated capture of the I-Y4015 sub-block and below in the yfull.com online tree from 30 Jan 2018 (in support of B00DNA) See https://yfull.com/tree/I-Y4015/ for the latest version. A slightly more complicated example that we often use is the following taken from the B10DNA page:
Copy to clipboard
{img fileId="24" thumb="box" rel="box[g]" imalign="left"}
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.

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:
Copy to clipboard
{DIV(float="right" width="200px")}{img fileId="120" thumb="box" rel="box[g]" imalign="center" width="200px"}{DIV}
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.

Auray and Le Croisic, France

Map showing Auray and Le Croisic in France and their closeness to each other.
But often we may want a title or name placard attached to the image. That brings a little more complication into the scenario.
Copy to clipboard
{DIV(float="left")}::__Auray and Le Croisic, France__::%%%{img fileId="51" width="200" thumb="y" rel="box[g]" imalign="center"}{DIV}
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 (::).


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

yFull
I-Y4015
FTDNA
Private
I-S1990
FTDNA
Block
I-A8601
FTDNA
Public
I-S1990
An annotated capture of the I-Y4015 sub-block and below in the yfull.com online tree from 30 Jan 2018 (in support of B00DNA) See https://yfull.com/tree/I-Y4015/ for the latest version. An annotated capture of the I-S1990 sub-block and below in the FamilyTreeDNA private tree from 12 Jan 2019 (in support of B00DNA). The tree is only available to registered users while logged in. Depicts L-338 parent to assist in SNP Pack selection.  Update from Jun 2016 version. From BigY Block Tree An annotated capture of the FTDNA Public tree for I-S1990 and below to indicate the B00DNA group haplogroup
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}
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:
Copy to clipboard
__((yFull))%%%[https://yfull.com/tree/I-Y4015/|I-Y4015]__
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:
Copy to clipboard
{img fileId="24" thumb="box" rel="box[g]" imalign="center"}
which we covered already above in the introduction about including images.

Ytree.net Z1909

An annotated capture of the R1b-Z1909 block and below in the ytree.net online tree from 28 Dec 2018 (in support of B10DNA) See http://ytree.net/DisplayTree.php?blockID=778 for the latest version.
yFull.com Z1909

An annotated capture of the R1b-Z1909 block and below in the yfull.com online tree from 28 Dec 2018 (in support of B10DNA) See http://yfull.com/tree/R-Z1909 for the latest version.
FamilyTreeDNA Z1909

An annotated capture of the R1b-Z1909 block and below in the FamilyTreeDNA private tree from 18 Dec 2018 (in support of B10DNA).
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}