Template:Image button - Revision history

Cabalex at 19:49, 15 April 2026

2026-04-15T19:49:18Z

← Older revision		Revision as of 19:49, 15 April 2026
Line 2:		Line 2:
	<div class="image-button-container {{#if:{{{label\|}}}\|has-text}}">		<div class="image-button-container {{#if:{{{label\|}}}\|has-text}}">
	<!-- Main image with link -->		<!-- Main image with link -->
	<div class="image {{{image-hover\|hide-on-hover}}}">[[File:{{{image}}}\|{{{size\|330px}}}\|link={{link}}\|class={{{imageClass\|}}} ]]</div><!--		<div class="image {{{image-hover\|hide-on-hover}}}">[[File:{{{image}}}\|{{{size\|330px}}}\|link={{{link\|}}}\|class={{{imageClass\|}}} ]]</div><!--

	Hover image with same link (positioned absolutely)		Hover image with same link (positioned absolutely)

Cabalex at 19:47, 15 April 2026

2026-04-15T19:47:58Z

← Older revision		Revision as of 19:47, 15 April 2026
Line 1:		Line 1:
	<includeonly>		<includeonly>
	<div class="image-button-container {{#if:{{~~#var:~~label}}\|has-text}}">		<div class="image-button-container {{#if:{{{label\|}}}\|has-text}}">
	<!-- Main image with link -->		<!-- Main image with link -->
	<div class="image {{{image-hover\|hide-on-hover}}}">[[File:{{{image}}}\|{{{size\|330px}}}\|link={{link}}\|class={{{imageClass\|}}} ]]</div><!--		<div class="image {{{image-hover\|hide-on-hover}}}">[[File:{{{image}}}\|{{{size\|330px}}}\|link={{link}}\|class={{{imageClass\|}}} ]]</div><!--
Line 9:		Line 9:
	--><div class="image-button--gloss"></div><!--		--><div class="image-button--gloss"></div><!--

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

	--></div></includeonly><!--		--></div></includeonly><!--

Cabalex at 19:45, 15 April 2026

2026-04-15T19:45:57Z

← Older revision		Revision as of 19:45, 15 April 2026
Line 1:		Line 1:
	<includeonly>~~<!--~~		<includeonly>
	~~Variables~~		<div class="image-button-container {{#if:{{#var:label}}\|has-text}}">
	~~-->{{#vardefine:link\|{{{link\|}}}}}<!--~~		<!-- Main image with link -->
	~~-->{{#vardefine:label\|{{{label\|}}}}}<!--~~		<div class="image {{{image-hover\|hide-on-hover}}}">[[File:{{{image}}}\|{{{size\|330px}}}\|link={{link}}\|class={{{imageClass\|}}} ]]</div><!--
	~~Single container div for positioning~~
	~~-->~~<div class="image-button-container {{#if:{{#var:label}}\|has-text}}"><!--

	Main image with link
	--><div class="image ~~{{#if:~~{{{image-hover~~\|}}}~~\|hide-on-hover}}">~~{{#if:{{{image\|}}}\|~~[[File~~:{{#replace~~:{{{image~~\|}}~~}~~\|File:~~}}\|{{{size\|330px}}}\|link={{~~#var:~~link}}\|class={{{imageClass\|}}} ]]}}</div><!--

	Hover image with same link (positioned absolutely)		Hover image with same link (positioned absolutely)
	-->{{#if:{{{image-hover\|}}}\|<div class="hover-image">[[File~~:{{#replace~~:{{{image-hover~~\|}}~~}~~\|File:~~}}\|{{{size\|330px}}}\|link={{~~#var:~~link}}\|class={{{imageClass\|}}}]]</div>}}<!--		-->{{#if:{{{image-hover\|}}}\|<div class="hover-image">[[File:{{{image-hover}}}\|{{{size\|330px}}}\|link={{{link}}}\|class={{{imageClass\|}}}]]</div>}}<!--

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

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

	--></div></includeonly><!--		--></div></includeonly><!--

Cabalex at 19:35, 15 April 2026

2026-04-15T19:35:59Z

@@ Line 1: / Line 1: @@
-This creates one of the stylized and formatted buttons on the [[{{MediaWiki:Mainpage}}|main page]].
+<includeonly><!--
-== 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>}}<!--
-<noinclude>
+    -->{{#if:{{#var:label}}|<div class="image-button--text">[[{{#var:link}}|{{#var:label}}]]</div>}}<!--
-[[Category:Template documentation]]
 </noinclude>

Cabalex: Created page with "This creates one of the stylized and formatted buttons on the main page. == Usage == Groups of this template should be wrapped inside of and each entry should be a separate line in an unordered list. This div can be given one of the classes `columns-x` where x is a number from 1 to 9, and the links will line up in that many columns if..."

2026-04-15T19:32:47Z

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

New page

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

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

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