Difference between revisions of "Sitesupport-url"
(→Image syntax) |
(→Image link) |
||
(One intermediate revision by the same user not shown) | |||
Line 197: | Line 197: | ||
[[Image:Tourm101.jpg|center|100px]] | [[Image:Tourm101.jpg|center|100px]] | ||
+ | |||
==Image link== | ==Image link== | ||
Line 202: | Line 203: | ||
You can also turn an image into a link by adding the link=Page Name tag to the syntax: | You can also turn an image into a link by adding the link=Page Name tag to the syntax: | ||
− | <nowiki>[[Image:Tourm101.jpg|center|</nowiki>'''link= | + | <nowiki>[[Image:Tourm101.jpg|center|</nowiki>'''link=Tourmaline'''<nowiki>|200px]]</nowiki> |
Which results in: | Which results in: | ||
− | [[Image:Tourm101.jpg|center|link= | + | [[Image:Tourm101.jpg|center|link=Tourmaline|200px]] |
− | |||
==Whitespace & enter== | ==Whitespace & enter== |
Latest revision as of 15:44, 26 March 2012
Contents
Editing
This page is designed to give you a quick 'go to' place whenever you need a bit of code to adapt to your own needs. If what you are looking for isn't listed here then please check this page out.
Header
In order to create headers like the one above, you place two equal signs around your title:
==Header==
Subheaders receive 3 equal signs
===Subheaders===
These headers will automatically result in a table of content (TOC) being displayed above the first header (like on this page). Keep in mind that this may be somewhere halfway down the page if this is where the first header is placed. If you don't want a table of content to be displayed you can add __NOTOC__ at the top of the page.
Widgets
In order to plug all kinds of external features such as youtube videos, google maps, vimeo videos etc etc into the wiki we use widgets. More information about widgets can be found here. Below are a few examples you will use a lot:
Iframe widget
With the iframe widget you can plug any other webpage into the wiki. Simply replace the url that is displayed here with that of the site you want to plug and adjust the parameters width, height and border to your liking.
{{#Widget:Iframe
|url=http://en.wikipedia.org/wiki/Diamond
|width=700
|height=400
|border=0
}}
Results in:
Book embedding Widgets
google books
This widget can be used to plug Google Books texts into the wiki. Here's how you do this:
1. Find a book you want to plug, let's say this book.
2. Copy the url: http://books.google.com/books?id=UmsDAAAAQAAJ
3. Then copy the bit behind 'id=': UmsDAAAAQAAJ
4. Paste that code in the widget shown below.
5. Define the width and height.
So that you get something that looks like this:
{{#widget:Google Books
|id=UmsDAAAAQAAJ
|height=750
|width=700}}
Results in:
archive.org
This widget is the the iframe widget mentioned above with its parameters adapted so that it makes full use of the width of our pages. It can be used to plug online books from archive.org into the wiki. Here's how to do this:
1. Find a book on archive.org. Let's say... this book.
2. On the book page on archive.org, click on 'read online' (top left).
3. Copy the url of the page that will pop up and paste it in the widget below:
{{#widget:Iframe
|url=http://www.archive.org/stream/historyofbigbona00wrigrich#page/2/mode/2up
|width=700
|height=700
|border=0
}}
This will result in:
Vimeo Video embedding
1. Go the to vimeo video you want to embed.
2. Copy the number behind vimeo.com/
3. Paste the number behind the 'id=' in the following widget:
{{#widget:Vimeo|id=20281170}}
Which results in:
Youtube video
Another widget is used for youtube videos. Here's how that works.
1. Copy the url of the youtube video you want to plug. This should look like this: http://www.youtube.com/watch?v=po19CNiUoI0.
2. Copy the bit behind the 'v=' which in this case is: 'po19CNiUoI0'
3. Paste that code behind the 'id=' in the following widget code:
{{#widget:YouTube|id=po19CNiUoI0}}
Which results in:
Links
Linking is one of the most important features of the wiki. There is two possible kinds of links: internal links that refer to other pages on the wiki, and external links which link to other pages on the web.
Here's the syntax for links in Mediawiki pages:
Normal internal link: [[Sapphire]], resulting in this: Sapphire
Internal link with alternative text: [[Sapphire|Alt Text]], resulting in this: Alt Text
Plain external link: http://www.external_links.com, resulting in this: http://www.external_links.com
External Link with alternative text: [http://www.external_links.com External link with alternative text], resulting in this: External link with alternative text
Image syntax
In order to display an image on a page you will first need to upload the image to the wiki. After that is done you can enclose the file name in the proper syntax. Here's an example of the normal image syntax:
[[File:Name|thumb|center|500px|Normal Image syntax]]
Let's look at each parameter:
[[File:Name.jpg|thumb|center|500px|Normal Image syntax]]
Adding '|thumb|' to the line of coding results in an image that is enclosed in a frame with the option of adding a description beneath the image.
[[File:Name.jpg|thumb|center|500px|Normal Image syntax]]
The second parameter determines the position of the image on the page. There is 3 possibilities: 'left', 'center' and 'right'.
[[File:Name.jpg|thumb|center|500px|Normal Image syntax]]
This number determines the size of the image. Our pages are 700px wide to give you a reference.
[[File:Name.jpg|thumb|center|500px|Normal Image syntax]]
The last parameter is the description text which will be displayed beneath the image when you use the thumb tag.
Here's an example of a thumb image:
[[Image:Tourm101.jpg|thumb|center|500px|Our logo]]
Which results in:
Apart from thumbs you can also display images without a subscript:
[[Image:Tourm101.jpg|left|100px]]
[[Image:Tourm101.jpg|right|100px]]
[[Image:Tourm101.jpg|center|100px]]
Results in:
Image link
You can also turn an image into a link by adding the link=Page Name tag to the syntax:
[[Image:Tourm101.jpg|center|link=Tourmaline|200px]]
Which results in:
Whitespace & enter
Whenever you need a whitespace because you think things are too packed together you can use several <br /> tags. Each <br /> tag will equal one 'enter'.
Tables
For more information on tables, click here.
Here's some basic tables:
{|class="wikitable"
|-
!header
|-
|text
|text
|-
|text
|text
|}
Which results in:
header | |
---|---|
text | text |
text | text |
A table with a header:
{|class="wikitable"
|-
!colspan="2"|header
|-
|text
|text
|-
|text
|text
|}
Which results in:
header | |
---|---|
text | text |
text | text |
A table with width defined:
{|class="wikitable" width=80%
|-
|text
|text
|-
|text
|text
|}
Which results in:
text | text |
text | text |
Centering bits of text
You can center tables, text, widgets etc by enclosing it in between center tags: <center>text</center>
Resulting in: