View source for Taming.io Wiki:Wikitext Guide

{{#vardefine:inline_desktop_only|This feature is supported on desktop, but will not be rendered at all on mobile devices.}}<!--
-->{{#vardefine:desktop_only|{{MessageBox
| header = Desktop only
| text = {{#var:inline_desktop_only}}
| bordercolor = #f00
}}}}<!--
-->{{#vardefine:inline_mobile_partial_support|This feature is completely supported on desktop, whilst its use is partially supported on mobile devices. Some features may not be available or may be rendered completely arbitrarily.}}<!--
-->{{#vardefine:mobile_partial_support|{{MessageBox
| header = Partial mobile support
| text = {{#var:inline_mobile_partial_support}}
| bordercolor = #600
}}}}<!--
-->{{#vardefine:mobile_full_support|{{MessageBox
| header = Full mobile support
| text = This feature is completely supported on both desktop and mobile devices.
| bordercolor = #09f
}}}}
{{MessageBox
| header = Differences between editors
| text = This page contains a description of the [[Help:Source editor|source editor]]. If you're a new editor, odds are you're using the VisualEditor and in which case, the following page can help you: [[Help:VisualEditor]].
}}
'''Wikitext''' is the main markup language used on FANDOM. Although it is ''not'' a substitute for [[w:Help:HTML|HTML]], and more of a complement to it, most things you can do with HTML are implemented in some form as wikitext - which is far more readable, making its use preferable over HTML. A deeper control over it can be granted by using the source editor, and this guide will assume that is your editor of choice.

'''The presence of any of the wikitext below is not to be meant as an endorsement to use it in article pages.''' The purpose of this page is to educate you on how to use wikitext so that you can have a deeper understanding of it. If you'd like a thorough list of what is recommended and what is not on what scenarios, refer to the [[Project:Manual of Style|manual of style]]. In general, though, anything is allowed on [[:Category:Templates|templates]].

== Finding Templates ==
Wikitext may be easier to use than HTML, but by itself, it cannot do a lot of what HTML can. The solution is not to use HTML directly, but rather use [[:Category:Templates|templates]]. They take some parameters and output some HTML. Using them makes it much easier for other editors to understand what your code means.

Templates are categorized in a couple main categories, namely:
* [[:Category:Data_templates|Data templates]], that show some sort of information.
* [[:Category:Design_templates|Design templates]], meant to facilitate creating designs.
* [[:Category:Infobox_templates|Infobox templates]], meant to facilitate creating infoboxes.
* [[:Category:Notice_templates|Notice templates]], that show messages to the reader about a page.
* [[:Category:Navbox_templates|Navbox templates]], that link pages related to one another.
Search what you're looking for or, if you still can't find one, ask someone else to create them for you.

== Text Formatting ==
: ''Expanded from [[w:Help:Wikitext|Help:Wikitext]]''
{{#var:mobile_full_support}}
{| class = "article-table"
|+ Wikitext that works inside text
|-
! style = "width:20%" | Description
! style = "width:40%" | Code
! style = "width:40%" | Output
|-
| Italicized text
|<code><nowiki>''Italic''</nowiki></code>
|''Italic''
|-
|Bolded text
|<code><nowiki>'''Bold'''</nowiki></code>
|'''Bold'''
|-
|Underlined text
|<code><nowiki><u>Underline</u></nowiki></code>
|<u>Underline</u>
|-
|Strikethrough text
|<code><nowiki><s>Strikethrough</s></nowiki></code>
|<s>Strikethrough</s>
|-
|Superscript
|<code><nowiki>1<sup>st</sup></nowiki></code>
|1<sup>st</sup>
|-
|Subscript
|<code><nowiki>O<sub>2</sub></nowiki></code>
|O<sub>2</sub>
|-
|Small Text
|<code><nowiki>Small <small>text</small></nowiki></code>
|Small <small>text</small>
|-
|Big Text
|<code><nowiki>Big <big>text</big></nowiki></code>
|Big <big>text</big>
|-
|Internal link
|<code><nowiki>[[Taming.io Wiki]]</nowiki></code><br/>
<code><nowiki>[[Taming.io Wiki|Not Taming.io Wiki haha]]</nowiki></code>
|[[Taming.io Wiki]]<br/>[[Taming.io Wiki|Not Taming.io Wiki haha]]<br/>
|-
|Interwiki link
|<code><nowiki>[[w:c:starwars:Wookie]]</nowiki></code><br/>
<code><nowiki>[[w:c:mopeio:Mope.io|Mope.io]]</nowiki></code>
|[[w:c:starwars:Wookie]]<br/>
[[w:c:mopeio:Mope.io|Mope.io]]
|-
|Category linking
|Adds the category to the page: <code><nowiki>[[Category:Guidelines]]</nowiki></code><br/>
Links the category in the text: <code><nowiki>[[:Category:Guidelines]]</nowiki></code>
|[[Category:Guidelines]]<br/>[[:Category:Guidelines]]
|-
|External link<br/>(to other websites)
|<code><nowiki>[https://www.example.org]</nowiki></code><br/>
<code><nowiki>[https://www.example.org displayed text]</nowiki></code><br/>
<code><nowiki>https://www.example.org</nowiki></code>
|[https://www.example.org]<br />
[https://www.example.org displayed text]<br />
https://www.example.org
|-
|Redirect to another page
|<code><nowiki>#REDIRECT [[Taming.io Wiki]]</nowiki></code>
|Sample: [[Home]]
|-
|Cite link
|<code><nowiki><cite>https://www.fandom.com/</cite></nowiki></code>
|<cite>https://www.fandom.com/</cite>
|-
|Sign your posts on talk pages (username only)
|<code><nowiki>~~~</nowiki></code> (3 tildes)
|[[User:Williek11|Williek11]] ([[Message Wall:Williek11|talk]])
|-
|Sign your posts on talk pages
|<code><nowiki>~~~~</nowiki></code> (4 tildes) 
|[[User:Williek11|Williek11]] ([[Message Wall:Williek11|talk]]) {{CURRENTTIME}}, <br />
{{CURRENTDAY}} {{CURRENTMONTHNAME}} {{CURRENTYEAR}} (UTC) 
|-
|Insert the current date and time (UTC). Generally only used on talk pages.
|<code><nowiki>~~~~~</nowiki></code> (5 tildes)
|{{CURRENTTIME}}, {{CURRENTDAY}} {{CURRENTMONTHNAME}} {{CURRENTYEAR}} (UTC)
|-
|Display wikitext code
|<code><nowiki>&lt;nowiki&gt;'''This is not bold 🤔🤔🤔'''&lt;/nowiki&gt;</nowiki></code>
|<nowiki>'''This is not bold 🤔🤔🤔'''</nowiki>
|-
|Display text as source code
|<code>&lt;code&gt;Source Code&lt;/code&gt;</code>
|<code>Source Code</code>
|}
{{#var:mobile_full_support}}
{| class = "article-table"
|+ Wikitext that works only on the start of the line
|-
! style = "width:20%" | Description
! style = "width:40%" | Code
! style = "width:40%" | Output
|-
|Headings<br />
([[mw:Help talk:Formatting#Level 1|Skip level 1]]; it's used for the page name.)
|
<code><nowiki>== Level 2 ==</nowiki></code><br />
<code><nowiki>=== Level 3 ===</nowiki></code><br />
<code><nowiki>==== Level 4 ====</nowiki></code><br />
<code><nowiki>===== Level 5 =====</nowiki></code><br />
<code><nowiki>====== Level 6 ======</nowiki></code>
|
<div style="padding:0 20px 20px 20px;border-radius:5px;margin:10px 0;border:1px #6666 solid">
<div style="font-size: 1.5em; margin-top: 1em; margin-bottom: 0.25em; line-height: 1.3; border-bottom: 1px solid #AAAAAA;">Level 2</div>
<div style="font-size: 1.17em; margin-top: 0.3em; line-height: 1.6; padding-top: 0.5em;">Level 3</div>
<div style="font-size: 1.1em; margin-top: 0.3em; line-height: 1.6; padding-top: 0.5em;">Level 4</div>
<div style="font-size: 1.05em; margin-top: 0.3em; line-height: 1.6; padding-top: 0.5em;">Level 5</div>
<div style="font-size: 0.95em; margin-top: 0.3em; line-height: 1.6; padding-top: 0.5em;">Level 6</div>
</div>
|-
|List heading
|<code>;Heading</code><br/>
<code>:This is generic description text</code>
|
<div style="padding:0 20px 0 20px;border-radius:5px;margin:10px 0;border:1px #6666 solid">
;Heading
:This is generic description text
</div>
|-
|Indented paragraph or line
|<code>No indent</code><br />
<code>: One indent</code><br />
<code>:: Two indents</code>
|
<div style="padding:20px;border-radius:5px;margin:10px 0;border:1px #6666 solid">
No indent
: One indent
:: Two indents
</div>
|- id = "Bullet List"
|Bullet list
|
<code>* One</code><br />
<code>* Two</code><br />
<code>** Two point one</code><br />
<code>* Three</code>
|
<div style="padding:20px;border-radius:5px;margin:10px 0;border:1px #6666 solid">
* One
* Two
** Two point one
* Three
</div>
|- id = "Numbered List"
|Numbered list
|
<code># One</code><br />
<code># Two</code><br />
<code>## Two point one</code><br />
<code># Three</code>
|
<div style="padding:20px;border-radius:5px;margin:10px 0;border:1px #6666 solid">
# One
# Two
## Two point one
# Three
</div>
|-
|Mixed list
|
<code>* bulleted item</code><br />
<code>*# numbered item 1</code><br />
<code>*#: indented item a</code><br />
<code>*#: indented item b</code><br />
<code>*# numbered item 2</code>
|
<div style="padding:20px;border-radius:5px;margin:10px 0;border:1px #6666 solid">
* bulleted item
*# numbered item 1
*#: indented item a
*#: indented item b
*# numbered item 2
</div>
|-
|Preformatted text with working wikitext
|<code><nowiki>&nbsp;[[Taming.io Wiki]]</nowiki></code> (note space at start)
|
 [[Taming.io Wiki]]
|-
|Preformatted text that shows underlying wikitext
|<code><nowiki><pre>[[Taming.io Wiki]]</pre></nowiki></code> 
|<pre>[[Taming.io Wiki]]</pre>
|-
|Syntax Highlighting
|<pre style="margin:10px 0">
<syntaxhighlight lang="javascript">
while (true) {
   console.log("yes")
}
</syntaxhighlight>
</pre>
|<syntaxhighlight lang="javascript">
while (true) {
   console.log("yes")
}
</syntaxhighlight>
|}

== Transclusion and variables ==
{{#var:mobile_full_support}}
{| class = "article-table"
! style = "width:20%" | Description
! style = "width:40%" | Code
! style = "width:40%" | Output
|-
| Transcluding templates ([[:Category:Templates|full list]])
| <code><nowiki>{{Normal}}</nowiki></code> - calls template from [[Template:Normal]]
| {{Normal}}
|-
| Transcluding pages ([[Special:AllPages|full list]])
| <code><nowiki>{{:Category:Taming.io Wiki}}</nowiki></code> - takes page from [[:Category:Taming.io Wiki|Category:Taming.io Wiki]]
| {{:Category:Taming.io Wiki}}
|- 
| Transcluding Lua modules
| <code><nowiki>{{#invoke:String|join|Bark|Quack|Meow}}</nowiki></code> - calls module from [[Module:String]], calls method join and passes arguments:
# <code>Bark</code>
# <code>Quack</code>
# <code>Meow</code>
| {{#invoke:String|join|Bark|Quack|Meow}}
|-
| Substituting expressions ('''<code style="color:#f008"><nowiki>{{<expression>}}</nowiki></code>''') to wikitext upon re-editing the page
| <code><nowiki>{{subst:Water}} - {{subst:#invoke:String|join|Bark|Quack|Meow}}</nowiki></code>
| [[File:badge-water.png|30px]] {{Text-Shadow|content=[[Water Type]]}} - Bark, Quack and Meow<br/><br/>
Source code: <code><nowiki>[[File:badge-water.png|30px]] {{Text-Shadow|content=[[Water Type]]}} - Bark, Quack and Meow</nowiki></code>
|-
| Magic Words ([[mw:Help:Magic_words|full list]])
| <code><nowiki>{{LOCALMONTHNAME}} {{LOCALDAY}} of {{LOCALYEAR}}</nowiki></code>
| {{LOCALMONTHNAME}} {{LOCALDAY}} of {{LOCALYEAR}}
|-
| Parser Functions ([[mw:Help:Extension:ParserFunctions|full list]])
| <pre>{{#switch: {{CURRENTDOW}}
| 0 = It's Sunday!!! ☀️☀️☀️
| 1 = It's monday.
| 2 = It's tuesday today...
| 3 = It's the middle of the week!!!
| 4 = It's that other day after wednesday!
| 5 = Friday!!!!!
| 6 = Hohohohohoh! It's saturday!
}}</pre>
| {{#switch: {{CURRENTDOW}}
| 0 = It's Sunday!!! ☀️☀️☀️
| 1 = It's monday.
| 2 = It's tuesday today...
| 3 = It's the middle of the week!!!
| 4 = It's that other day after wednesday!
| 5 = Friday!!!!!
| 6 = Hohohohohoh! It's saturday!
}}
|-
| Dynamic Page List 3; note that this a '''Mediawiki extension''' disabled by default. Documentation can be found in its page: [[w:c:community:Help:DynamicPageList|Help:DynamicPageList]]. Use only as last resort.
| <pre><dpl>
    category = Taming.io
</dpl></pre>
| <dpl>
    category = Taming.io
</dpl>
|-
| Variables; note that this a '''Mediawiki extension''' disabled by default. Documentation can be found in its page: [[mw:Extension:Variables|Extension:Variables]]
| <pre>{{#vardefine:DefaultText|This is default text.}}
{{#vardefine:Title|DefaultText variable:}}
;{{#var:Title}}:
:{{#var:DefaultText}}</pre>
| {{#vardefine:DefaultText|This is default text.}}
{{#vardefine:Title|DefaultText variable:}}
;{{#var:Title}}
:{{#var:DefaultText}}
|-
| Reader's username; note that this is a '''site-wide enhancement''', not standard wiki behavior. Documentation can be found in its page: [[w:c:dev:InputUsername|InputUsername]] ({{#var:inline_desktop_only}})
| <code><nowiki>Hello {{USERNAME}}!</nowiki></code>
| Hello {{USERNAME}}!
|-
| Countdown; note that this is a '''site-wide enhancement''', not standard wiki behavior. Documentation can be found in its page: [[w:c:dev:Countdown|Countdown]] ({{#var:inline_desktop_only}})
| <code><nowiki><span class="countdown">2022 started <span class="countdowndate">January 1 2022 00:00:00 UTC</span> ago.</span></nowiki></code>
| <span class="countdown">2022 started <span class="countdowndate">January 1 2022 00:00:00</span> ago.</span>
|}

== Tables ==
{{#var:mobile_full_support}}
=== <code>{|</code> and <code>|}</code> ===
They start and end a wikitext table, respectively. Their HTML equivalent is <code><nowiki><table><tbody></nowiki></code> and <code><nowiki></table></tbody></nowiki></code>. In order to add attributes to the table node, you must add the attributes after the <code>{|</code>. It would look like this:
<pre>{| style = "width:100%" class = "generic-table"
...
|}</pre><br/>There are three classes with default styling in this wiki. Those are <code>article-table</code>, <code>wikitable</code> and <code>fandom-table</code>. Those look like this:
<div style = "display:grid;grid-template-areas: '1 2';grid-gap: 20px;grid-template-columns: 1fr 1fr;">
<pre>{| class = "wikitable"
|+ wikitable
! Animal !! Type !! Biome
|-
| Cow || {{Normal}} || Forest Biome
|-
| Black Cat || {{Spectrum}} || Dark Forest
|}</pre>

{| class = "wikitable" style = "margin: 0;"
|+ wikitable
! Animal !! Type !! Biome
|-
| Cow || {{Normal}} || Forest Biome
|-
| Black Cat || {{Spectrum}} || Dark Forest
|}

<pre>{| class = "article-table"
|+ article-table
! Animal !! Type !! Biome
|-
| Ice Golem || {{Ice}} || Winter Biome
|-
| Armadillo || {{Rock}} || Desert Biome
|}</pre>

{| class = "article-table" style = "margin: 0;"
|+ article-table
! Animal !! Type !! Biome
|-
| Ice Golem || {{Ice}} || Winter Biome
|-
| Armadillo || {{Rock}} || Desert Biome
|}

<pre style="display:flex;justify-content:center;align-content:center;flex-direction:column;">{| class = "fandom-table"
|+ fandom-table
! Animal !! Type !! Biome
|-
| Cow || {{Normal}} || Forest Biome
|-
| Black Cat || {{Spectrum}} || Dark Forest
|}</pre>

{| class = "fandom-table" style = "margin: 0;"
|+ fandom-table
! Animal !! Type !! Biome
|-
| Cow || {{Normal}} || Forest Biome
|-
| Black Cat || {{Spectrum}} || Dark Forest
|}
</div>

For wiki pages, you should always use the article-table. For other uses, such as user pages or talk pages, choose whichever you prefer.

=== <code>|-</code> ===
It will create a new row. Its HTML equivalent is <code><nowiki><tr></nowiki></code>. To add attributes to it, add them after <code>|-</code>.
<div style = "display:grid;grid-template-areas: '1 2';grid-gap: 20px;grid-template-columns: 1fr 1fr;">
<pre>{| class = "article-table"
| Row 1 Column 1 || Row 1 Column 2 || Row 1 Column 3
|- style = "background:#f0f8;font-weight:bold"
| Row 2 Column 1 || Row 2 Column 2 || Row 2 Column 3
|}</pre>
{| class = "article-table"
| Row 1 Column 1 || Row 1 Column 2 || Row 1 Column 3
|- style = "background:#f0f8;font-weight:bold"
| Row 2 Column 1 || Row 2 Column 2 || Row 2 Column 3
|}
</div>

=== <code>|+</code> ===
It will create a table caption. Its HTML equivalent is <code><nowiki><caption></nowiki></code>. To add text to it, write it after the <code>|+</code>. To add attributes to it, you must add it after <code>|+</code>, and insert the text with a <code>|</code> prefix. It would look like this:
<div style = "display:grid;grid-template-areas: '1 2';grid-gap: 20px;grid-template-columns: 1fr 1fr;">
<pre>{| class = "article-table"
|+ style = "background:#0f08" | This is the caption of an article-table.
|}</pre>
{| class = "article-table"
|+ style = "background:#f008" | This is the caption of an article-table.
|}
</div>

=== <code>!</code> and <code>!!</code> ===
They will both create a table header. Their HTML equivalent is <code><nowiki><th></nowiki></code>. The only difference is that the <code>!</code> only works on the start of a line, while <code>!!</code> works inline after another header. Here is what it means for source code:

<div style = "display:grid;grid-template-areas: '1 2 3';grid-gap: 20px;grid-template-columns: 1fr 1fr;">
<pre>{| class = "article-table"
! Cell 1 !! Cell 2 !! Cell 3
|}</pre>
<pre>{| class = "article-table"
! Cell 1
! Cell 2
! Cell 3
|}</pre>
</div>
... Are the same thing.

Inline cells should only be used in case they ''can'' fit in one line. In order to add attributes to these, you need to write the attributes after the <code>!</code> and add a <code>|</code> prefix before the text. It would look like this:

<div style = "display:grid;grid-template-areas: '1 2';grid-gap: 20px;grid-template-columns: 1fr 1fr;">
<pre>{| class = "article-table"
! style = "background:#00f8" | Animal !! style = "background:#0f08" | Type !! style = "background:#f008" | Biome
|}</pre>
{| class = "article-table"
! style = "background:#00f8" | Animal !! style = "background:#0f08" | Type !! style = "background:#f008" | Biome
|}
</div>

=== <code>|</code> and <code>||</code> ===
They will both create a table cell. Their HTML equivalent is <code><nowiki><td></nowiki></code>. The only difference is that the <code>|</code> only works on the start of a line, while <code>||</code> works inline after another cell. It's the same situation as <code>!</code>.

Inline cells should only be used in case they ''can'' fit in one line. In order to add attributes to these, you need to write the attributes after the <code>|</code> and add a <code>|</code> prefix before the text. It would look like this:

<div style = "display:grid;grid-template-areas: '1 2';grid-gap: 20px;grid-template-columns: 1fr 1fr;">
<pre>{| class = "article-table"
! Animal !! Type !! Biome
|- style = "font-weight:bold"
| style = "background:#f008" | Boar || style = "background:#0f08" | {{Rock}} || style = "background:#00f8" | Forest Biome
|- style = "font-weight:bold"
| style = "background:#f008" | Rabbit || style = "background:#0f08" | {{Plant}} || style = "background:#00f8" |  Forest Biome
|}</pre>
{| class = "article-table"
! Animal !! Type !! Biome
|- style = "font-weight:bold"
| style = "background:#f008" | Boar || style = "background:#0f08" | {{Rock}} || style = "background:#00f8" | Forest Biome
|- style = "font-weight:bold"
| style = "background:#f008" | Rabbit || style = "background:#0f08" | {{Plant}} || style = "background:#00f8" |  Forest Biome
|}
</div>

=== Sorting ===
: ''Restructured and summarized from [[mw:Help:Sorting|Help:Sorting]]''
{{#var:mobile_full_support}}
Tables can be made sortable, in the sense that each column can be alphabetically listed. See the following example:

<div style = "display:grid;grid-template-areas: '1 2';grid-gap: 20px;grid-template-columns: 1fr 1fr;">
<pre>{| class="article-table sortable"
! Fruit   !! Price
|-
| Apples  || £0.95
|-
| Oranges || £0.85
|-
| Pears   || £1.15
|-
| Purple Mangosteen || £1.05
|}</pre>
{| class="article-table sortable"
! Fruit   !! Price
|-
| Apples  || £0.95
|-
| Oranges || £0.85
|-
| Pears   || £1.15
|-
| Purple Mangosteen || £1.05
|}
</div>

By adding the <code>sortable</code> class, you make the table alphabetically sortable, ascending or descending. Additionally, more fine-grained control can be earned by using the <code>data-sort-value</code> attribute on individual cells:

<div style = "display:grid;grid-template-areas: '1 2';grid-gap: 20px;grid-template-columns: 1fr 1fr;">
<pre>{| class="article-table sortable"
! Sword !! Damage
|-
| data-sort-value = "1" | Stone Sword
| 30 damage
|-
| data-sort-value = "2" | Golden Sword
| 34 damage
|-
| data-sort-value = "3" | Ruby Sword
| 37 damage
|-
| data-sort-value = "4" | Amethyst Sword
| 40 damage
|}</pre>
{| class="article-table sortable"
! Sword !! Damage
|-
| data-sort-value = "1" | Stone Sword
| 30 damage
|-
| data-sort-value = "2" | Golden Sword
| 34 damage
|-
| data-sort-value = "3" | Ruby Sword
| 37 damage
|-
| data-sort-value = "4" | Amethyst Sword
| 40 damage
|}
</div>

Additionally, if you want to add a footer and don't want that to be sorted, you can add the <code>sortbottom</code> class to the row you want to keep there:

<div style = "display:grid;grid-template-areas: '1 2';grid-gap: 20px;grid-template-columns: 1fr 1fr;">
<pre>{| class="article-table sortable"
! Sword !! Damage
|-
| data-sort-value = "1" | Stone Sword
| 30 damage
|-
| data-sort-value = "2" | Golden Sword
| 34 damage
|-
| data-sort-value = "3" | Ruby Sword
| 37 damage
|-
| data-sort-value = "4" | Amethyst Sword
| 40 damage
|- class = "sortbottom"
! Average:
! 35 damage
|}</pre>
{| class="article-table sortable"
! Sword !! Damage
|-
| data-sort-value = "1" | Stone Sword
| 30 damage
|-
| data-sort-value = "2" | Golden Sword
| 34 damage
|-
| data-sort-value = "3" | Ruby Sword
| 37 damage
|-
| data-sort-value = "4" | Amethyst Sword
| 40 damage
|- class = "sortbottom"
! Average:
! 35 damage
|}
</div>

== Images ==
: ''Oversimplified from [[mw:Help:Images|Help:Images]]''
{{#var:mobile_partial_support}}
=== Rendering Images ===
The syntax to using images is the following:
 <nowiki>[[</nowiki>File:''filename''.''extension''|''<options>''|''<nowiki><caption></nowiki>'']]
Where options can be zero or more of the following:
{{MessageBox|text = While it is a best-practice to properly ident code, as outlined in the [[Taming.io Wiki:Manual of Style|Manual of Style]], images might break if you use identation in them. A very trivial example could be: <code><nowiki>[[File:Badge-normal.png | 25px | link = Types]]</nowiki></code>, where the link doesn't show when hovering: [[File:Badge-normal.png | 25px | link = Types]]. Another thing is that the following options must not be capitalized, because capitalization could be ignored by the interpreter.}}

{| class = "article-table" style = "table-layout: fixed;"
! style = "width:110px" | Title
! style = "width:274px" | Syntax
! style = "width:calc(100% - 384px)" | Description
|-
| Formatting
| <code><nowiki>[[File:...|<format>]]</nowiki></code>
| Can be '''border''', '''frameless''', '''frame''' (or '''framed''') or '''thumb''' (or '''thumbnail''').
|-
| Horizontal alignment
| <code><nowiki>[[File:...|<alignment>]]</nowiki></code>
| Can be '''left''', '''right''', '''center''' or '''none'''. If multiple are present, the first one will be used.
|-
| Vertical alignment
| <code><nowiki>[[File:...|<alignment>]]</nowiki></code>
| This will only work if the image is in inline display (will be displayed alongside text), which can be achieved by ''not'' specifying horizontal alignment. Can be '''baseline''', '''sup''', '''super''', '''text-top''', '''middle''', '''bottom''', '''text-bottom'''. If multiple are present, the first one will be used.
|-
| Link
| <code><nowiki>[[File:...|link=<text>]]</nowiki></code>
| Supports any type of link; external, interwiki and internal.
|-
|colspan = "3"|
* External: <code><nowiki>[[File:TamingioLogo.png|x25px|link=https://taming.io]]</nowiki></code> -> [[File:TamingioLogo.png|x25px|link=https://taming.io]]
* Interwiki: <code><nowiki>[[File:Wiki.png|x25px|link=w:Community_Central]]</nowiki></code> -> [[File:Wiki.png|x25px|link=w:Community_Central]]
* Internal: <code><nowiki>[[File:Badge-normal.png|x25px|link=Types]]</nowiki></code> -> [[File:Badge-normal.png|x25px|link=Types]]
|-
| Text when image fails to load
| <code><nowiki>[[File:...|alt=<text>]]</nowiki></code>
| Adds the alt attribute to the image. HTML documentation for this attribute can be found at the [https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/alt MDN Web Docs].
|-
| Classes
| <code><nowiki>[[File:...|class=<text>]]</nowiki></code>
| Adds the class attribute to the image.
|-
| Resizing
| <code><nowiki>[[File:...|<resize>]]</nowiki></code>
| <code><width></code> and <code><height></code> must be whole numbers. Can be one of the following:
* <code><width>px</code> - Resizes the image to fit within the given width in pixels, changing the height accordingly.
* <code>x<height>px</code> - Resizes the image to fit within the given height in pixels, changing the width accordingly.
* <code><width>x<height>px</code> - Resizes the image to fit within the given height in pixels, changing the width accordingly.<!--
Commented out because it's much an obscure property and won't work properly to me
* <code>upright=<num></code> - Scales the width of the image according to the value, 1.0 being the default scale, and 2.0 doubling the image.
-->
|}

== Galleries ==
:''This section only showcases gallery types. If you'd like a more thorough guide on the usage of galleries, [[User blog:Williek11/Using Galleries|check this blog]].''
{{#var:mobile_partial_support}}
Galleries are a way of displaying multiple images in a single, connected block. The general syntax is:
<syntaxhighlight lang="html"><gallery type = "type">
File:filename.extension|options|caption
File:filename.extension|options|caption
{...}
</gallery></syntaxhighlight>
Note the lack of brackets; they should not be present. Also do note that some options will not work as expected with galleries; formatting, alignment and resizing will be displayed as caption text for the images, if they come after the actual caption. Classes will not work altogether. For images, the only options available are '''alt''' and '''link'''.

=== Types ===
There are three gallery types:
{{MessageBox|text = The galleries weren't added because they occupied too much space. You can test them in a [[Special:MyPage/Sandbox|sandbox]].}}
{| class = "article-table"  style = "table-layout: fixed;"
! style="width:100px;" | Type
! style="width:300px;" | Description
! Example
|-
| <code>gallery</code>
| This type will display the images in a series of separate blocks. This is the default type if no type or an invalid one is typed.
| <syntaxhighlight lang="html"><gallery type = "gallery">
File:MP-MrNoice.png|MrNoice
File:MP-Asttro.png|Asttro
File:MP-BubTheTamer.png|BubTheTamer
</gallery></syntaxhighlight>
|-
| <code>slideshow</code>
| This type will display the images in a single block, allowing the reader to browse through the images in the gallery. Captions are displayed on hover.
| <syntaxhighlight lang="html"><gallery type = "slideshow">
File:MP-MrNoice.png|MrNoice
File:MP-Asttro.png|Asttro
File:MP-BubTheTamer.png|BubTheTamer
</gallery></syntaxhighlight>
|-
| <code>slider</code>
| This type will display the images in a single block, automatically scrolling through and taking the entire space of the page. Captions are displayed on hover as titles. If you want to add additional descriptions to the images, use <code><nowiki>|linktext=</nowiki></code> at the end of every image.
| <syntaxhighlight lang="html"><gallery type = "slider">
File:MP-MrNoice.png|MrNoice|linktext=This is MrNoice
File:MP-Asttro.png|Asttro|linktext=This is Asttro
File:MP-BubTheTamer.png|BubTheTamer|linktext=This is BubTheTamer
</gallery></syntaxhighlight>
|}

=== Navigation ===
You can add links to images in a gallery, as previously estabilished. The following code will work as expected:

<pre><gallery type = "gallery">
File:MP-MrNoice.png|MrNoice|link=User:MrNoice
File:MP-Asttro.png|Asttro|link=User:Asttro
File:MP-BubTheTamer.png|BubTheTamer|link=User:BubTheTamer
</gallery></pre>
<gallery type = "gallery">
File:MP-MrNoice.png|MrNoice|link=User:MrNoice
File:MP-Asttro.png|Asttro|link=User:Asttro
File:MP-BubTheTamer.png|BubTheTamer|link=User:BubTheTamer
</gallery>

But if the main point of adding the gallery is to navigate between pages (link them), then you should use the <code>navigation="true"</code> attribute. Now what does it change? To the desktop user, nothing. To the [[w:Help:Mobile_web|mobile user]], it makes the galleries look nicer. Let's see it here:

<pre><gallery type = "gallery" navigation = "true">
File:MP-MrNoice.png|MrNoice|link=User:MrNoice
File:MP-Asttro.png|Asttro|link=User:Asttro
File:MP-BubTheTamer.png|BubTheTamer|link=User:BubTheTamer
</gallery></pre>
<gallery type = "gallery" navigation = "true">
File:MP-MrNoice.png|MrNoice|link=User:MrNoice
File:MP-Asttro.png|Asttro|link=User:Asttro
File:MP-BubTheTamer.png|BubTheTamer|link=User:BubTheTamer
</gallery>

If you use your phone or enter the mobile view mode in your desktop, you can see the difference; the first one is unorganized, while the second one is in a grid shape.

== Tabbers ==
{{#var:mobile_partial_support}}
To start a tabber, write the <code><nowiki><tabber></nowiki></code> tag, and to end it, use the <code><nowiki></tabber></nowiki></code> ending tag. To add sections to it, write <code><nowiki>|-| <title> = <text></nowiki></code>. Here's what that looks like:

<pre><tabber>
|-| Section 1 = I
|-| Section 2 = like
|-| Section 3 = jelly
</tabber></pre>

<tabber>
|-| Section 1 = I
|-| Section 2 = like
|-| Section 3 = jelly
</tabber>

=== Nesting Tabbers ===
You can also add a tabber inside a tabber. And add a tabber inside that tabber. And even add a tabber inside that other tabber. To start it, add <code><nowiki>{{#tag:tabber|</nowiki></code>, and to end it, add <code><nowiki>}}</nowiki></code>. It acts very similarly to a template; except parameters will each be a section. To add a new section to it, write <code><nowiki><header> = <text> {{!}}-{{!}}</nowiki></code>. The <code><nowiki>{{!}}-{{!}}</nowiki></code> tells the interpreter that a new section is starting. Here's what all this looks like:

<pre><tabber>
|-| Section 1 =
This is the first section of the tabber.
{{#tag:tabber |
   Section 1.1 = This is the 1.1th section of the tabber. {{!}}-{{!}}
   Section 1.2 = This is the 1.2th section of the tabber.
}}
|-| Section 2 =
This is the second section section of the tabber.
{{#tag:tabber |
   Section 2.1 = This is the 2.1th section of the tabber. {{!}}-{{!}}
   Section 2.2 = This is the 2.2th section of the tabber.
}}
</tabber></pre>

<tabber>
|-| Section 1 =
This is the first section of the tabber.
{{#tag:tabber |
   Section 1.1 = This is the 1.1th section of the tabber. {{!}}-{{!}}
   Section 1.2 = This is the 1.2th section of the tabber.
}}
|-| Section 2 =
This is the second section section of the tabber.
{{#tag:tabber |
   Section 2.1 = This is the 2.1th section of the tabber. {{!}}-{{!}}
   Section 2.2 = This is the 2.2th section of the tabber.
}}
</tabber>

== Page Indicators ==
:Simplified from [[Help:Page status indicators]]
{{#var:desktop_only}}
Page status indicators (also known as top icons or heading icons) are icons located at the very top of a page, used to display information about a given page in the wiki. It can be used for a variety of things, since it accepts any wikitext that can be parsed.

=== Usage ===
Its wikitext usage is as follows:
<syntaxhighlight lang="html"><indicator name="foo">
[[File:Foo.svg|20px]]
</indicator></syntaxhighlight>

==== Notes ====
* It is common practice to use indicators along with images, but it can render any valid wikitext input.
* The name attribute is a unique identifier of the indicator. If there are two or more indicators of the same name, only the last one will be added.
* The indicators are sorted not by the order in which they were added, but by alphabetical order. This allows for complex hierarchical structures.
* The name will also be used as the title attribute of the indicator element, which means it must also serve as a short description of the indicator.
* Indicators are not tracked by MediaWiki software, like for example in a special page that you can search where they are found. It is expected that they be used together with other software that can be tracked, such as categories.

== See Also ==
*[[w:Help:Templates|Templates]], [[w:Help:Lua|Lua]], [[w:Help:Tables|Tables]] and [[w:Help:Tabbers|Tabbers]] on Community Central.

[[Category:Guidelines]]