Jump to content

Template:Image button: Difference between revisions

From cardbot.wiki
Created page with "This creates one of the stylized and formatted buttons on the [[{{MediaWiki:Mainpage}}|main page]]. == Usage == Groups of this template should be wrapped inside of <code><nowiki><div class="image-buttons"></div></nowiki></code> and each entry should be a separate line in an unordered list. This div can be given one of the classes <code>columns-x</code> where x is a number from 1 to 9, and the links will line up in that many columns if..."
 
No edit summary
Line 1: Line 1:
This creates one of the stylized and formatted buttons on the [[{{MediaWiki:Mainpage}}|main page]].
<includeonly><!--
Variables
-->{{#vardefine:link|{{{link|}}}}}<!--
-->{{#vardefine:label|{{{label|}}}}}<!--
Single container div for positioning
--><div class="image-button-container {{#if:{{#var:label}}|has-text}}"><!--


== Usage ==
    Main image with link
Groups of this template should be wrapped inside of <code><nowiki><div class="image-buttons"></div></nowiki></code> and each entry should be a separate line in an [[wikipedia:Help:Lists#Basically|unordered list]]. This div can be given one of the classes <code>columns-x</code> where x is a number from 1 to 9, and the links will line up in that many columns if space permits (default is 3). See [[Template:Image_button/styles.css]] for the full definitions of these classes and styling for this template.
    --><div class="image {{#if:{{{image-hover|}}}|hide-on-hover}}">{{#if:{{{image|}}}|[[File:{{#replace:{{{image|}}}|File:}}|{{{size|330px}}}|link={{#var:link}}|class={{{imageClass|}}} ]]}}</div><!--


===Parameters===
    Hover image with same link (positioned absolutely)
<templatedata>
    -->{{#if:{{{image-hover|}}}|<div class="hover-image">[[File:{{#replace:{{{image-hover|}}}|File:}}|{{{size|330px}}}|link={{#var:link}}|class={{{imageClass|}}}]]</div>}}<!--
{
"description": {
"en": "Creates stylized and formatted buttons."
},
"format": "inline",
"params": {
"link": {
"label": {
"en": "Link"
},
"description": {
"en": "The target page for the link."
},
"required": true,
"example": "Main Page",
"type": "wiki-page-name"
},
        "label": {
            "label": {
                "en": "Label"
            },
            "description": {
                "en": "Text to display as image label."
            },
            "required": false,
            "suggested": true,
            "type": "string"
        },
"image": {
"label": {
"en": "Image"
},
"description": {
"en": "Button image to display."
},
"required": true,
"suggested": true,
"type": "wiki-file-name"
        },
        "image-hover": {
"label": {
"en": "Image on Hover"
},
"description": {
"en": "Button image to display when hovered."
},
"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": "576px",
"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"
]
}
},
"paramOrder": [
"link",
        "label",
"image",
        "image-hover",
"size",
"imageClass"
]
}
</templatedata>


    --><div class="image-button--gloss"></div><!--


<noinclude>
    -->{{#if:{{#var:label}}|<div class="image-button--text">[[{{#var:link}}|{{#var:label}}]]</div>}}<!--
[[Category:Template documentation]]
 
--></div></includeonly><!--
Link text below (if needed)
--><noinclude>
{{doc}}
</noinclude>
</noinclude>

Revision as of 19:35, 15 April 2026