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..."
 
mNo edit summary
 
(3 intermediate revisions by the same user not shown)
Line 1: Line 1:
This creates one of the stylized and formatted buttons on the [[{{MediaWiki:Mainpage}}|main page]].
<includeonly>
<div class="image-button-container {{#if:{{{label|}}}|has-text}}">
<!-- Main image with link -->
<div class="image {{{image-hover|hide-on-hover}}}">[[File:{{{image}}}|{{{size|330px}}}|link={{{link|}}}|class={{{imageClass|}}} ]]</div><!--


== Usage ==
    Hover image with same link (positioned absolutely)
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.
    -->{{#if:{{{image-hover|}}}|<div class="hover-image">[[File:{{{image-hover}}}|{{{size|330px}}}|link={{{link}}}|class={{{imageClass|}}}]]</div>}}<!--


===Parameters===
    --><div class="image-button--gloss"></div><!--
<templatedata>
{
"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>


    -->{{#if:{{{label|}}}|<div class="image-button--text">[[{{{link}}}|{{{label}}}]]</div>}}<!--


<noinclude>
--></div></includeonly><!--
[[Category:Template documentation]]
Link text below (if needed)
--><noinclude>
{{doc}}
</noinclude>
</noinclude>

Latest revision as of 19:49, 15 April 2026