Jump to content
Main menu
Main menu
move to sidebar
hide
Navigation
Main page
Recent changes
Random page
Special pages
contributors
Wiki Rules
Style Guide
Needed Pages
game-components
Getting started guide
Animals
Buildings
Compute Blocks
Crops & Trees
Decor
Game Mechanics
Items
Logistic Blocks
Paths
Quests
Structural Blocks
Terraforming
Vehicles
factorytown2-links
Steam
Discord
Youtube
Official website
Factory Town 2 Wiki
Search
Search
Appearance
Create account
Log in
Personal tools
Create account
Log in
Pages for logged out editors
learn more
Contributions
Talk
Editing
Template:MP link/doc
Template
Discussion
English
Read
Edit
View history
Tools
Tools
move to sidebar
hide
Actions
Read
Edit
View history
General
What links here
Related changes
Special pages
Page information
Appearance
move to sidebar
hide
Warning:
You are not logged in. Your IP address will be publicly visible if you make any edits. If you
log in
or
create an account
, your edits will be attributed to your username, along with other benefits.
Anti-spam check. Do
not
fill this in!
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>
Summary:
Please note that all contributions to Factory Town 2 Wiki may be edited, altered, or removed by other contributors. If you do not want your writing to be edited mercilessly, then do not submit it here.
You are also promising us that you wrote this yourself, or copied it from a public domain or similar free resource (see
Factory Town 2 Wiki:Copyrights
for details).
Do not submit copyrighted work without permission!
Cancel
Editing help
(opens in new window)
Templates used on this page:
MediaWiki:Mainpage
(
view source
)
Template:MP link
(
edit
)
