imported>ARTIFICER: Importing default loadout

2026-07-10T05:55:35Z

Importing default loadout

New page

This creates one of the stylized and formatted links on the [[{{MediaWiki:Mainpage}}|main page]].

== Usage ==
Groups of this template should be wrapped inside of <code><nowiki><div class="mp-links"></div></nowiki></code> and each entry should be a separate line in an [[wikipedia:Help:Lists#Basically|unordered list]].

===Wrapper classes===
The following are supported classes for the <code><nowiki><div class="mp-links"></div></nowiki></code> '''wrapper''':
{| class="wikitable"
! Class !! Effect
|-
| columns-x || Attempt to put x columns in each row, if there is sufficient space to do so. x can be a number 1-8. <code>columns-max</code> can also be used to fit as many as possible on a row.
|-
| plain || No outline or background on the links, similar to <code>mode="nolines"</code> in a standard image gallery.
|-
| stretch || Links will stretch vertically to fill any empty space.
|-
| side-image || Put the image on the side of the link text instead of above it. Combine with <code>left</code>, <code>right</code>, or <code>center</code> to align links inside their boxes (see examples below).
|}

===Parameters===
<templatedata>
{
"description": {
"en": "Creates stylized and formatted links on the main page."
},
"format": "inline",
"params": {
"1": {
"label": {
"en": "Text"
},
"description": {
"en": "The text to display. If the link parameter is not given, this will also be the link target."
},
"example": "Stuff",
"type": "string",
"suggested": true
},
"link": {
"label": {
"en": "Link"
},
"description": {
"en": "The target page for the link, if different than the display text."
},
"required": false,
"example": "Main Page",
"type": "wiki-page-name"
},
"image": {
"label": {
"en": "Image"
},
"description": {
"en": "An image to display with the link."
},
"required": false,
"suggested": true,
"type": "wiki-file-name"
},
"size": {
"label": {
"en": "Image size"
},
"description": {
"en": "The size of the image, in px."
},
"required": false,
"default": "42px",
"type": "string"
},
"imageClass": {
"label": "Image class",
"description": "A class to give directly to the image",
"example": "invert-on-dark",
"type": "string",
"suggestedvalues": [
"invert-on-dark",
"invert-on-light"
]
},
"altText": {
"label": "Alt text",
"description": "Alt text to describe the image",
"example": "Wiki logo",
"type": "string",
"suggested": true
}
},
"paramOrder": [
"1",
"link",
"image",
"size",
"imageClass",
"altText"
]
}
</templatedata>

==Examples==
===Basic usage===
<div style="display:flex; flex-flow:row wrap;">
<div style="flex:1 1 50%;">
<pre style="margin:0;">
<div class="mp-links columns-3">
* {{MP link|Stuff|link=Special:Random|image=Magic.png|size=42px}}
* {{MP link|Things|link=Special:Random}}
* {{MP link|Fire|link=Special:Random|image=Fire.png|size=42px}}
* {{MP link|Water|link=Special:Random|image=Water.png|size=42px}}
* {{MP link|Earth|link=Special:Random|image=Earth.png|size=42px}}
* {{MP link|Light|link=Special:Random|image=Light.png|size=42px}}
</div>
</pre>
</div>
<div style="flex:1 1 50%;">
<div class="mp-links columns-3">
* {{MP link|Stuff|link=Special:Random|image=Magic.png|size=42px}}
* {{MP link|Things|link=Special:Random}}
* {{MP link|Fire|link=Special:Random|image=Fire.png|size=42px}}
* {{MP link|Water|link=Special:Random|image=Water.png|size=42px}}
* {{MP link|Earth|link=Special:Random|image=Earth.png|size=42px}}
* {{MP link|Light|link=Special:Random|image=Light.png|size=42px}}
</div>
</div>
</div>

===plain===
<div style="display:flex; flex-flow:row wrap;">
<div style="flex:1 1 50%;">
<pre style="margin:0;">
<div class="mp-links columns-3 plain">
* {{MP link|Stuff|link=Special:Random|image=Magic.png|size=42px}}
* {{MP link|Things|link=Special:Random}}
* {{MP link|Fire|link=Special:Random|image=Fire.png|size=42px}}
* {{MP link|Water|link=Special:Random|image=Water.png|size=42px}}
* {{MP link|Earth|link=Special:Random|image=Earth.png|size=42px}}
* {{MP link|Light|link=Special:Random|image=Light.png|size=42px}}
</div>
</pre>
</div>
<div style="flex:1 1 50%;">
<div class="mp-links columns-3 plain">
* {{MP link|Stuff|link=Special:Random|image=Magic.png|size=42px}}
* {{MP link|Things|link=Special:Random}}
* {{MP link|Fire|link=Special:Random|image=Fire.png|size=42px}}
* {{MP link|Water|link=Special:Random|image=Water.png|size=42px}}
* {{MP link|Earth|link=Special:Random|image=Earth.png|size=42px}}
* {{MP link|Light|link=Special:Random|image=Light.png|size=42px}}
</div>
</div>
</div>

===stretch===
This only has an effect if the links are in some sort of container that has its height set by other means, such as in a flex container with siblings (the default wiki.gg main page does this). For this example, the size of the container has been artificially increased to show the links stretching.
<div style="display:flex; flex-flow:row wrap;">
<div style="flex:1 1 50%;">
<pre style="margin:0; height:20em;">
<div class="mp-links columns-3 stretch">
* {{MP link|Stuff|link=Special:Random|image=Magic.png|size=42px}}
* {{MP link|Things|link=Special:Random}}
* {{MP link|Fire|link=Special:Random|image=Fire.png|size=42px}}
* {{MP link|Water|link=Special:Random|image=Water.png|size=42px}}
* {{MP link|Earth|link=Special:Random|image=Earth.png|size=42px}}
* {{MP link|Light|link=Special:Random|image=Light.png|size=42px}}
</div>
</pre>
</div>
<div style="flex:1 1 50%;">
<div class="mp-links columns-3 stretch">
* {{MP link|Stuff|link=Special:Random|image=Magic.png|size=42px}}
* {{MP link|Things|link=Special:Random}}
* {{MP link|Fire|link=Special:Random|image=Fire.png|size=42px}}
* {{MP link|Water|link=Special:Random|image=Water.png|size=42px}}
* {{MP link|Earth|link=Special:Random|image=Earth.png|size=42px}}
* {{MP link|Light|link=Special:Random|image=Light.png|size=42px}}
</div>
</div>
</div>

===side-image===
====left====
<div style="display:flex; flex-flow:row wrap;">
<div style="flex:1 1 50%;">
<pre style="margin:0;">
<div class="mp-links columns-3 side-image left">
* {{MP link|Stuff|link=Special:Random|image=Magic.png|size=42px}}
* {{MP link|Things|link=Special:Random}}
* {{MP link|Fire|link=Special:Random|image=Fire.png|size=42px}}
* {{MP link|Water|link=Special:Random|image=Water.png|size=42px}}
* {{MP link|Earth|link=Special:Random|image=Earth.png|size=42px}}
* {{MP link|Light|link=Special:Random|image=Light.png|size=42px}}
</div>
</pre>
</div>
<div style="flex:1 1 50%;">
<div class="mp-links columns-3 side-image left">
* {{MP link|Stuff|link=Special:Random|image=Magic.png|size=42px}}
* {{MP link|Things|link=Special:Random}}
* {{MP link|Fire|link=Special:Random|image=Fire.png|size=42px}}
* {{MP link|Water|link=Special:Random|image=Water.png|size=42px}}
* {{MP link|Earth|link=Special:Random|image=Earth.png|size=42px}}
* {{MP link|Light|link=Special:Random|image=Light.png|size=42px}}
</div>
</div>
</div>

====right====
Notice that this not only aligns the links to the right, but flips the order and puts the image on the right.
<div style="display:flex; flex-flow:row wrap;">
<div style="flex:1 1 50%;">
<pre style="margin:0;">
<div class="mp-links columns-3 side-image right">
* {{MP link|Stuff|link=Special:Random|image=Magic.png|size=42px}}
* {{MP link|Things|link=Special:Random}}
* {{MP link|Fire|link=Special:Random|image=Fire.png|size=42px}}
* {{MP link|Water|link=Special:Random|image=Water.png|size=42px}}
* {{MP link|Earth|link=Special:Random|image=Earth.png|size=42px}}
* {{MP link|Light|link=Special:Random|image=Light.png|size=42px}}
</div>
</pre>
</div>
<div style="flex:1 1 50%;">
<div class="mp-links columns-3 side-image right">
* {{MP link|Stuff|link=Special:Random|image=Magic.png|size=42px}}
* {{MP link|Things|link=Special:Random}}
* {{MP link|Fire|link=Special:Random|image=Fire.png|size=42px}}
* {{MP link|Water|link=Special:Random|image=Water.png|size=42px}}
* {{MP link|Earth|link=Special:Random|image=Earth.png|size=42px}}
* {{MP link|Light|link=Special:Random|image=Light.png|size=42px}}
</div>
</div>
</div>

====center====
<div style="display:flex; flex-flow:row wrap;">
<div style="flex:1 1 50%;">
<pre style="margin:0;">
<div class="mp-links columns-3 side-image center">
* {{MP link|Stuff|link=Special:Random|image=Magic.png|size=42px}}
* {{MP link|Things|link=Special:Random}}
* {{MP link|Fire|link=Special:Random|image=Fire.png|size=42px}}
* {{MP link|Water|link=Special:Random|image=Water.png|size=42px}}
* {{MP link|Earth|link=Special:Random|image=Earth.png|size=42px}}
* {{MP link|Light|link=Special:Random|image=Light.png|size=42px}}
</div>
</pre>
</div>
<div style="flex:1 1 50%;">
<div class="mp-links columns-3 side-image center">
* {{MP link|Stuff|link=Special:Random|image=Magic.png|size=42px}}
* {{MP link|Things|link=Special:Random}}
* {{MP link|Fire|link=Special:Random|image=Fire.png|size=42px}}
* {{MP link|Water|link=Special:Random|image=Water.png|size=42px}}
* {{MP link|Earth|link=Special:Random|image=Earth.png|size=42px}}
* {{MP link|Light|link=Special:Random|image=Light.png|size=42px}}
</div>
</div>
</div>

===Single column plain list===
A common use case that people default to regular lists of links for, but MP link can do it and better!

For this example there are also 2 "things" links. The first has no image, and the second uses a [[dev:File:Blank.png|blank image]] to help with alignment.
<div style="display:flex; flex-flow:row wrap;">
<div style="flex:1 1 50%;">
<pre style="margin:0;">
<div class="mp-links columns-1 side-image left plain">
* {{MP link|Stuff|link=Special:Random|image=Magic.png|size=42px}}
* {{MP link|Things|link=Special:Random}}
* {{MP link|Things|link=Special:Random|image=Blank.png|size=42px}}
* {{MP link|Fire|link=Special:Random|image=Fire.png|size=42px}}
* {{MP link|Water|link=Special:Random|image=Water.png|size=42px}}
* {{MP link|Earth|link=Special:Random|image=Earth.png|size=42px}}
* {{MP link|Light|link=Special:Random|image=Light.png|size=42px}}
</div>
</pre>
</div>
<div style="flex:1 1 50%;">
<div class="mp-links columns-1 side-image left plain">
* {{MP link|Stuff|link=Special:Random|image=Magic.png|size=42px}}
* {{MP link|Things|link=Special:Random}}
* {{MP link|Things|link=Special:Random|image=Blank.png|size=42px}}
* {{MP link|Fire|link=Special:Random|image=Fire.png|size=42px}}
* {{MP link|Water|link=Special:Random|image=Water.png|size=42px}}
* {{MP link|Earth|link=Special:Random|image=Earth.png|size=42px}}
* {{MP link|Light|link=Special:Random|image=Light.png|size=42px}}
</div>
</div>
</div>

<noinclude>
[[Category:Template documentation]]
</noinclude>

Template:MP link/doc - Revision history

imported>ARTIFICER: Importing default loadout