Jump to content

Template:MP link/doc

From Factory Town 2 Wiki
< Template:MP link
Revision as of 05:55, 10 July 2026 by imported>ARTIFICER (Importing default loadout)
(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)

This creates one of the stylized and formatted links on the main page.

Usage[edit]

Groups of this template should be wrapped inside of <div class="mp-links"></div> and each entry should be a separate line in an unordered list.

Wrapper classes[edit]

The following are supported classes for the <div class="mp-links"></div> wrapper:

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. columns-max can also be used to fit as many as possible on a row.
plain No outline or background on the links, similar to mode="nolines" 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 left, right, or center to align links inside their boxes (see examples below).

Parameters[edit]

<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[edit]

Basic usage[edit]

<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>

plain[edit]

<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>

stretch[edit]

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 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>

side-image[edit]

left[edit]

<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>

right[edit]

Notice that this not only aligns the links to the right, but flips the order and puts the image on the right. 

<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>

center[edit]

<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>

Single column plain list[edit]

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 blank image to help with alignment. 

<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>
Retrieved from "https://factorytown2.com/index.php?title=Template:MP_link/doc&oldid=1082"