Difference between revisions of "Examples of useful code"

From the Family Tree Forum Reference Library
m
 
(18 intermediate revisions by 2 users not shown)
Line 1: Line 1:
 +
[[Category:Help]]
 +
__NOEDITSECTION__
 +
[[image:usetop.jpg]]
 +
 
__TOC__
 
__TOC__
  
 +
==Sections and Headings==
 +
{|
 +
|-valign="top"
 +
|[[image:sections2.jpg|left]]
 +
|
  
Click on '''View Source''' tab, at the top, to see the code.
+
Any page which has more than 4 section headings will automatically generate a contents list.  
  
  
==Alphabetical Contents Lists==
+
If you have fewer than 4 headings or sections, you can use <nowiki>__TOC__</nowiki> to create the contents.
  
1. Each letter has its OWN page:
 
  
[[_A ]]|[[_B ]]|[[_C ]]|[[_D ]]|[[_E ]]|[[_F ]]|[[_G ]]|[[_H ]]|[[_I ]]|[[_J ]]|[[_K ]]|[[_L ]]|[[_M ]]|[[_N ]]|[[_O ]]|[[_P ]]|[[_Q ]]|[[_R ]]|[[_S ]]|[[_T ]]|[[_U ]]|[[_V ]]|[[_W ]]|[[_XYZ]]
+
Sections are created by the use of a number of <nowiki>=</nowiki> either side of the title.
  
  
2. Links WITHIN the same page:
+
As well as sorting out the hierarchy of the Contents, the layout and format is also generated.  
  
  
N.B. THIS USES THE SECTION HEADINGS SO IT APPEARS IN THE TOC/CONTENTS
+
The more <nowiki>=</nowiki> you use, the smaller the font.
 +
|}
  
<div align="center"> [[#A|A]] | [[#B|B]] | [[#C|C]] | [[#D|D]] | [[#E|E]] | [[#F|F]] | [[#G|G]] | [[#H|H]] | [[#I|I]] | [[#J|J]] | [[#K|K]] | [[#L|L]] | [[#M|M]] | [[#N|N]] | [[#O|O]] | [[#P|P]] | [[#Q|Q]] | [[#R|R]] | [[#S|S]] | [[#T|T]] | [[#U|U]] | [[#V|V]] | [[#W|W]] | [[#XYZ|XYZ]]</div>
 
  
 +
'''<nowiki>==Headline== </nowiki>'''
  
'''Example of the code:''' <nowiki>[[#A|A]]</nowiki>
+
Will give you large font and also a horizontal line.
  
<nowiki>#A </nowiki> is the name of the section. By putting |after it you can call the link anything you like.
+
This is the standard heading which should be used throughout this Wiki.
  
  
If there is '''nothing else''' on the page you can use  <nowiki>____NOTOC__ </nowiki>.
+
'''<nowiki>====Section Heading==== </nowiki>'''
  
This avoids a long vertical list in the contents.
+
Will give you a smaller font.
  
 +
Also used as standard throughout this Wiki.
  
'''N.B.''' If you do use <nowiki>__NOTOC__ </nowiki> anywhere on the page this overules the <nowiki>__TOC__</nowiki>.
 
  
 +
'''<nowiki>=====Subsection heading=====</nowiki>'''
  
If you can't use <nowiki>__NOTOC__ </nowiki> on a page because it already uses <nowiki>__TOC__ </nowiki> you can do the following:
+
Will give you an even smaller font.
  
  
<nowiki>'''A'''<span id="A"></span> This creates the anchor for the letter A</nowiki>
 
  
 +
==Alphabetical Contents Lists==
  
<nowiki>'''B'''<span id="B"></span> This creates the anchor for the letter B</nowiki>
+
See '''[[Using Multiple Images]]''' for using hyperlinked pictures.
  
  
Then you can use the code <nowiki>[[#A|A]]</nowiki> as above.
+
====1. Each letter has its OWN page====
  
 +
When you click on the letter, you will be taken to the selected page.
  
  See below for using Clickpic for a contents with hyperlinked pictures.
+
To see the code at work: [[Surname Directory - A]].
  
  
<br><br>
+
[[_A ]]|[[_B ]]|[[_C ]]|[[_D ]]|[[_E ]]|[[_F ]]|[[_G ]]|[[_H ]]|[[_I ]]|[[_J ]]|[[_K ]]|[[_L ]]|[[_M ]]|[[_N ]]|[[_O ]]|[[_P ]]|[[_Q ]]|[[_R ]]|[[_S ]]|[[_T ]]|[[_U ]]|[[_V ]]|[[_W ]]|[[_XYZ]]
  
==Code with image for pages under construction==
 
  
[[image:Construction.jpg|center]]
 
<br><br>
 
  
==Displaying images==
+
====2. Links WITHIN the same page====
  
 +
When you click on the letter, you will be taken to the selected section.
  
[[How_To_Align_Non-Uploaded_Images]] Eg. from Photobucket.
 
  
 +
'''To see the code at work:'''  '''[[Places_of_Worship:Sussex|Places of Worship ~Sussex]].'''
  
====One single image====
 
  
name | alignment | size | thumb ''or'' frame | caption
+
'''N.B. THIS USES THE SECTION HEADINGS SO THAT IT APPEARS IN THE TOC/CONTENTS'''
<br><br><br><br>
 
====='''1. You can just put in the image'''=====
 
  
It will come out full size and aligned to the left with no border or caption.
 
  
<nowiki>[[image:name of image.jpg]]</nowiki>
+
<div align="center"> [[#A|A]] | [[#B|B]] | [[#C|C]] | [[#D|D]] | [[#E|E]] | [[#F|F]] | [[#G|G]] | [[#H|H]] | [[#I|I]] | [[#J|J]] | [[#K|K]] | [[#L|L]] | [[#M|M]] | [[#N|N]] | [[#O|O]] | [[#P|P]] | [[#Q|Q]] | [[#R|R]] | [[#S|S]] | [[#T|T]] | [[#U|U]] | [[#V|V]] | [[#W|W]] | [[#XYZ|XYZ]]</div>
  
[[image:InitialsA.jpg]]
 
<br><br><br><br>
 
====='''2. You can choose horizontal alignment''' - right, left or center =====
 
  
<nowiki> [[image:name of image.jpg|alignment]] </nowiki>  
+
'''Example of the code:''' <nowiki>[[#A|A]]</nowiki>
  
[[image:InitialsA.jpg|center]]
 
<br><br><br><br>
 
====='''3. You can choose the size'''=====
 
  
<nowiki> [[image:name of image.jpg||size]]</nowiki>  
+
<nowiki>#A </nowiki> is the name of the section. By putting |after it you can call the link anything you like.
 
 
[[image:Construction.jpg|150px]]
 
<br><br><br><br>
 
=====4. To get a frame round your picture=====
 
 
 
<nowiki>[[image:name of image.jpg|alignment|size|thumb]]</nowiki>
 
 
 
[[image:Construction.jpg|left|200px|thumb]]
 
  
  
 +
If there is '''nothing else''' on the page you can use  <nowiki>____NOTOC__ </nowiki>.
 +
  
 +
This avoids a long vertical list in the contents.
  
  
 +
'''N.B.''' If you do use <nowiki>__NOTOC__ </nowiki> anywhere on the page this overules the <nowiki>__TOC__</nowiki>.
  
  
 +
If you can't use <nowiki>__NOTOC__ </nowiki> on a page because it already uses <nowiki>__TOC__ </nowiki> you can do the following:
  
  
 +
<nowiki>'''A'''<span id="A"></span> This creates the anchor for the letter A</nowiki>
  
  
 +
<nowiki>'''B'''<span id="B"></span> This creates the anchor for the letter B</nowiki>
  
  
 +
Then you can use the code <nowiki>[[#A|A]]</nowiki> as above.
  
  
  
 +
==Adding your user name==
  
 +
You can add your own user name by typing <nowiki>~~~</nowiki>
  
 +
'''EXAMPLE:''' [[User:Caroline|Caroline]]
  
 +
You can add the date and time after your name by typing <nowiki>~~~~</nowiki>
  
 +
'''EXAMPLE:''' [[User:Caroline|Caroline]] 10:35, 9 April 2008 (UTC)
  
  
  
 +
==Back to top==
  
 +
If a pages gets very long, you should consider using:
  
  
 +
'''<nowiki><div align="right">[[#top|Back to Top]]</div></nowiki>'''
  
=====5. To get a frame and have a caption for the picture=====
 
[[image:Construction.jpg|right|250px|thumb|Work in progress]]
 
<nowiki>[[image:name of image.jpg|alignment|size|thumb|caption]]</nowiki>
 
  
 +
EXAMPLE: [[#top|Back to Top]]
  
  
  
 +
==Redirections==
  
 +
A redirect allows one page to divert to another with the minimum amount of fuss.
  
 +
Redirects are usually used when information has been moved to another location.
  
  
 +
====To make a redirect====
  
'''Warning''' - combining more than one picture with or without text can give very unpredictable results.
+
*Create a new page
  
As you will see from the examples on this page you often need to press enter several times in order to get a sensible page layout!!
+
*Then type: <nowiki>#REDIRECT [[pagename]]</nowiki> (Page name being the name of the page you are linking to).
  
 +
*If you then search for the page you just created as a redirect, you'll be transferred to the page you linked the redirect to.
  
  
  
<br><br><br><br>
+
==Other Help Pages==
  
====More than one image on page====
+
[[image:minibad.jpg]] '''[[:Category:Help|The Wiki Guide]]'''
<br><br>
 
 
 
====='''1. Gallery - small thumbnails''' =====
 
 
 
<gallery caption="CONTENTS" widths="200px" heights="50px" perrow="4">
 
Image: WIP2_fr2.jpg|[[World_Index_Page]]
 
Image: Surnames3_fr2.jpg|[[Surname Directory]]
 
Image: Bigbook5_fr2.jpg|The [[Big_Book]] of Genealogy.
 
Image: Census_fr2.jpg|[[Census_Search]]  
 
</gallery>
 
<br><br>
 
====='''2. Clickpic - hyperlinked pictures'''=====
 
 
 
{| height="35px" border="0" cellpadding="15"
 
|{{clickpic|Parish_Registers| http://www.familytreeforum.com/wiki/images/d/d6/Register_fr2.jpg}}
 
||{{clickpic| Certificate_tutorials| http://www.familytreeforum.com/wiki/images/c/ca/Certs_fr.jpg}}
 
||{{clickpic|World_Index_Page| http://www.familytreeforum.com/wiki/images/3/30/WIP2_fr2.jpg}}
 
|-
 
|}
 
 
 
<span class="plainlinks"> [http://www.familytreeforum.com/wiki/index.php/Special:Allpages http://www.familytreeforum.com/wiki/images/b/b1/Index_fr2.jpg] </span>
 
 
 
<br><br>
 
 
 
'''To make smaller clickpic images:'''
 
 
 
{| border="0" cellpadding="20"
 
|{{clickpic|Surname Directory - A|http://www.familytreeforum.com/wiki/images/thumb/5/5c/InitialsA.jpg/75px-InitialsA.jpg}}
 
||{{clickpic|Surname Directory - B|http://www.familytreeforum.com/wiki/images/thumb/0/08/InitialsB.jpg/75px-InitialsB.jpg}}
 
||{{clickpic|Surname Directory - C|http://www.familytreeforum.com/wiki/images/thumb/6/6e/InitialsC.jpg/75px-InitialsC.jpg}}
 
||{{clickpic|Surname Directory - D|http://www.familytreeforum.com/wiki/images/thumb/f/fb/InitialsD.jpg/75px-InitialsD.jpg}}
 
|{{clickpic|Surname Directory - E|http://www.familytreeforum.com/wiki/images/thumb/5/5a/InitialsE.jpg/75px-InitialsE.jpg}}
 
||{{clickpic|Surname Directory - F|http://www.familytreeforum.com/wiki/images/thumb/4/4c/InitialsF.jpg/75px-InitialsF.jpg}}
 
|-
 
|}
 
 
 
You have to make the image smaller in advance ... you can't just edit the existing code!!
 
 
 
[[image:InitialsB.jpg|75px]] Right click and select properties, copy the hyperlink.
 
 
 
<nowiki> http://www.familytreeforum.com/wiki/images/thumb/0/08/InitialsB.jpg/75px-InitialsB.jpg</nowiki>
 
<br><br><br><br>
 
'''You can Mix and Match sizes:'''
 
 
 
{| height="35px" border="0" cellpadding="15"
 
|{{clickpic|Surname Directory - E|http://www.familytreeforum.com/wiki/images/thumb/5/5a/InitialsE.jpg/75px-InitialsE.jpg}}
 
||{{clickpic| Certificate_tutorials| http://www.familytreeforum.com/wiki/images/c/ca/Certs_fr.jpg}}
 
||{{clickpic|Surname Directory - F|http://www.familytreeforum.com/wiki/images/thumb/4/4c/InitialsF.jpg/75px-InitialsF.jpg}}
 
||{{clickpic|World_Index_Page| http://www.familytreeforum.com/wiki/images/3/30/WIP2_fr2.jpg}}
 
|-
 
|}
 
<br><br>
 
'''Images as hyperlinks outside the Wiki.'''
 
 
 
This example uses clickable pictures - this has the advantage of allowing you to use images to hyperlink to sites outside the Wiki. It uses the hyperlink of the image page. the image has to be uploaded in the size you need to use.
 
 
 
<nowiki> <span class="plainlinks"> link </span></nowiki> stops the blue arrow on the side.
 
 
 
{| width="100%" height="35px" border="0" cellpadding="10"
 
! width="30%"|<span class="plainlinks"> [http://www.familytreeforum.com/genealogy-general http://www.familytreeforum.com/wiki/images/3/36/Research.jpg]</span>
 
! width="30%"|<span class="plainlinks"> [http://www.familytreeforum.com/wiki/index.php/Creating_Your_Family_Tree http://www.familytreeforum.com/wiki/images/f/fe/Create_fr.jpg]</span>
 
! width="30%"| <span class="plainlinks"> [http://www.familytreeforum.com/family-tree-forum-community-boards http://www.familytreeforum.com/wiki/images/2/2e/Community.jpg] </span>
 
|}
 
<br><br>
 
 
 
====='''3. Picture on the left, some text and picture on the right'''=====
 
 
 
 
 
N.B. If the image has no "built in" border you need to use |thumb| not |frame|.
 
 
 
 
 
[[Image:Documents_fr2.jpg|left|150px|]]
 
[[image:construction.jpg|right|250px|]]
 
 
 
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec in enim. Aliquam erat volutpat. Maecenas id nibh ut turpis lobortis commodo. Phasellus sed neque. Proin fringilla euismod libero. Etiam vel lectus. Aliquam dui. Curabitur venenatis molestie neque. Integer mi dolor, gravida at, accumsan eget, fringilla eget, arcu. Suspendisse euismod. Nam et lorem accumsan magna venenatis pellentesque. In et ante. Etiam magna. Cras rutrum mi quis tellus.
 
 
 
Sed mi eros, lacinia mattis, gravida vel, placerat posuere, lacus. Duis accumsan tincidunt sapien. Morbi sed velit. Etiam quis orci. Donec at velit sed lorem elementum feugiat. Curabitur ut ligula. Quisque in eros. Morbi sed enim id sapien tristique fringilla. Nunc ligula augue, pellentesque ac, nonummy id, semper eget, ante. Sed mi eros, lacinia mattis, gravida vel, placerat posuere, lacus. Duis accumsan tincidunt sapien. Morbi sed velit. Etiam quis orci. Donec at velit sed lorem elementum feugiat. Curabitur ut ligula. Quisque in eros. Morbi sed enim id sapien tristique fringilla. Nunc ligula augue, pellentesque ac, nonummy id, semper eget, ante.
 
 
 
==Example of colour band for titles==
 
 
 
{| style="width:100%; height:35px" border="0" cellpadding="5"
 
| style="color:white" bgcolor="LightSteelBlue "|'''ENGLISH COUNTIES'''
 
|}
 

Latest revision as of 10:41, 23 April 2008


Usetop.jpg

Sections and Headings

Sections2.jpg

Any page which has more than 4 section headings will automatically generate a contents list.


If you have fewer than 4 headings or sections, you can use __TOC__ to create the contents.


Sections are created by the use of a number of = either side of the title.


As well as sorting out the hierarchy of the Contents, the layout and format is also generated.


The more = you use, the smaller the font.


==Headline==

Will give you large font and also a horizontal line.

This is the standard heading which should be used throughout this Wiki.


====Section Heading====

Will give you a smaller font.

Also used as standard throughout this Wiki.


=====Subsection heading=====

Will give you an even smaller font.


Alphabetical Contents Lists

See Using Multiple Images for using hyperlinked pictures.


1. Each letter has its OWN page

When you click on the letter, you will be taken to the selected page.

To see the code at work: Surname Directory - A.


_A |_B |_C |_D |_E |_F |_G |_H |_I |_J |_K |_L |_M |_N |_O |_P |_Q |_R |_S |_T |_U |_V |_W |_XYZ


2. Links WITHIN the same page

When you click on the letter, you will be taken to the selected section.


To see the code at work: Places of Worship ~Sussex.


N.B. THIS USES THE SECTION HEADINGS SO THAT IT APPEARS IN THE TOC/CONTENTS


A | B | C | D | E | F | G | H | I | J | K | L | M | N | O | P | Q | R | S | T | U | V | W | XYZ


Example of the code: [[#A|A]]


#A is the name of the section. By putting |after it you can call the link anything you like.


If there is nothing else on the page you can use ____NOTOC__ .


This avoids a long vertical list in the contents.


N.B. If you do use __NOTOC__ anywhere on the page this overules the __TOC__.


If you can't use __NOTOC__ on a page because it already uses __TOC__ you can do the following:


'''A'''<span id="A"></span> This creates the anchor for the letter A


'''B'''<span id="B"></span> This creates the anchor for the letter B


Then you can use the code [[#A|A]] as above.


Adding your user name

You can add your own user name by typing ~~~

EXAMPLE: Caroline

You can add the date and time after your name by typing ~~~~

EXAMPLE: Caroline 10:35, 9 April 2008 (UTC)


Back to top

If a pages gets very long, you should consider using:


<div align="right">[[#top|Back to Top]]</div>


EXAMPLE: Back to Top


Redirections

A redirect allows one page to divert to another with the minimum amount of fuss.

Redirects are usually used when information has been moved to another location.


To make a redirect

  • Create a new page
  • Then type: #REDIRECT [[pagename]] (Page name being the name of the page you are linking to).
  • If you then search for the page you just created as a redirect, you'll be transferred to the page you linked the redirect to.


Other Help Pages

Minibad.jpg The Wiki Guide