imported>AFloofyDoggo: /* Usage */

2025-05-18T14:00:15Z

Usage

New page

<noinclude>
== Usage ==

{{Flexbox
|image1=Stone.png
|link1=Stone
|caption1=Stone
|image2=Ash Logs.png
|link2=Ash Tree
|caption2=Ash Trees
|image3=Rune Essence.png
|link3=Rune Essence
|caption3=Rune Essence
|size=100px
|boxwidth=140px
}}
<noinclude>
You can add up to 10 images. If you don't need all 10, just leave the parameters empty.
The "size" parameter is optional and defaults to 100px.
The "boxwidth" parameter is optional and defaults to 140px - adjust as needed for your captions.
</noinclude>
<includeonly>
<div style="display:flex; flex-wrap:wrap; justify-content:flex-start; align-items:flex-start; margin:0; padding:0; gap:4px;">
{{#if:{{{image1|}}}|
<div style="width:{{{boxwidth|140px}}}; text-align:center; border:1px solid #666; background-color:#333; border-radius:4px; overflow:hidden;">
<div style="padding:4px;">[[File:{{{image1}}}|{{{size|100px}}}|link={{{link1|}}}]]</div>
<div style="padding:4px; white-space:nowrap; background-color:#222;">[[{{{link1|}}}|{{{caption1|}}}]]</div>
</div>|}}
{{#if:{{{image2|}}}|
<div style="width:{{{boxwidth|140px}}}; text-align:center; border:1px solid #666; background-color:#333; border-radius:4px; overflow:hidden;">
<div style="padding:4px;">[[File:{{{image2}}}|{{{size|100px}}}|link={{{link2|}}}]]</div>
<div style="padding:4px; white-space:nowrap; background-color:#222;">[[{{{link2|}}}|{{{caption2|}}}]]</div>
</div>|}}
{{#if:{{{image3|}}}|
<div style="width:{{{boxwidth|140px}}}; text-align:center; border:1px solid #666; background-color:#333; border-radius:4px; overflow:hidden;">
<div style="padding:4px;">[[File:{{{image3}}}|{{{size|100px}}}|link={{{link3|}}}]]</div>
<div style="padding:4px; white-space:nowrap; background-color:#222;">[[{{{link3|}}}|{{{caption3|}}}]]</div>
</div>|}}
{{#if:{{{image4|}}}|
<div style="width:{{{boxwidth|140px}}}; text-align:center; border:1px solid #666; background-color:#333; border-radius:4px; overflow:hidden;">
<div style="padding:4px;">[[File:{{{image4}}}|{{{size|100px}}}|link={{{link4|}}}]]</div>
<div style="padding:4px; white-space:nowrap; background-color:#222;">[[{{{link4|}}}|{{{caption4|}}}]]</div>
</div>|}}
{{#if:{{{image5|}}}|
<div style="width:{{{boxwidth|140px}}}; text-align:center; border:1px solid #666; background-color:#333; border-radius:4px; overflow:hidden;">
<div style="padding:4px;">[[File:{{{image5}}}|{{{size|100px}}}|link={{{link5|}}}]]</div>
<div style="padding:4px; white-space:nowrap; background-color:#222;">[[{{{link5|}}}|{{{caption5|}}}]]</div>
</div>|}}
{{#if:{{{image6|}}}|
<div style="width:{{{boxwidth|140px}}}; text-align:center; border:1px solid #666; background-color:#333; border-radius:4px; overflow:hidden;">
<div style="padding:4px;">[[File:{{{image6}}}|{{{size|100px}}}|link={{{link6|}}}]]</div>
<div style="padding:4px; white-space:nowrap; background-color:#222;">[[{{{link6|}}}|{{{caption6|}}}]]</div>
</div>|}}
{{#if:{{{image7|}}}|
<div style="width:{{{boxwidth|140px}}}; text-align:center; border:1px solid #666; background-color:#333; border-radius:4px; overflow:hidden;">
<div style="padding:4px;">[[File:{{{image7}}}|{{{size|100px}}}|link={{{link7|}}}]]</div>
<div style="padding:4px; white-space:nowrap; background-color:#222;">[[{{{link7|}}}|{{{caption7|}}}]]</div>
</div>|}}
{{#if:{{{image8|}}}|
<div style="width:{{{boxwidth|140px}}}; text-align:center; border:1px solid #666; background-color:#333; border-radius:4px; overflow:hidden;">
<div style="padding:4px;">[[File:{{{image8}}}|{{{size|100px}}}|link={{{link8|}}}]]</div>
<div style="padding:4px; white-space:nowrap; background-color:#222;">[[{{{link8|}}}|{{{caption8|}}}]]</div>
</div>|}}
{{#if:{{{image9|}}}|
<div style="width:{{{boxwidth|140px}}}; text-align:center; border:1px solid #666; background-color:#333; border-radius:4px; overflow:hidden;">
<div style="padding:4px;">[[File:{{{image9}}}|{{{size|100px}}}|link={{{link9|}}}]]</div>
<div style="padding:4px; white-space:nowrap; background-color:#222;">[[{{{link9|}}}|{{{caption9|}}}]]</div>
</div>|}}
{{#if:{{{image10|}}}|
<div style="width:{{{boxwidth|140px}}}; text-align:center; border:1px solid #666; background-color:#333; border-radius:4px; overflow:hidden;">
<div style="padding:4px;">[[File:{{{image10}}}|{{{size|100px}}}|link={{{link10|}}}]]</div>
<div style="padding:4px; white-space:nowrap; background-color:#222;">[[{{{link10|}}}|{{{caption10|}}}]]</div>
</div>|}}
</div>
</includeonly>
<noinclude>
<templatedata>
{
"description": "Creates a row of resource items with uniform box widths",
"params": {
"boxwidth": {
"description": "Width of each box (default: 140px)",
"default": "140px",
"type": "string",
"suggested": true
},
"size": {
"description": "Size of the images (default: 100px)",
"default": "100px",
"type": "string",
"suggested": true
},
"image1": {
"description": "Filename of the first image",
"type": "string",
"required": true
},
"link1": {
"description": "Wiki page to link to for the first item",
"type": "string",
"required": true
},
"caption1": {
"description": "Caption text for the first item",
"type": "string",
"required": true
},
"image2": {
"description": "Filename of the second image",
"type": "string"
},
"link2": {
"description": "Wiki page to link to for the second item",
"type": "string"
},
"caption2": {
"description": "Caption text for the second item",
"type": "string"
},
"image3": {
"description": "Filename of the third image",
"type": "string"
},
"link3": {
"description": "Wiki page to link to for the third item",
"type": "string"
},
"caption3": {
"description": "Caption text for the third item",
"type": "string"
},
"image4": {
"description": "Filename of the fourth image",
"type": "string"
},
"link4": {
"description": "Wiki page to link to for the fourth item",
"type": "string"
},
"caption4": {
"description": "Caption text for the fourth item",
"type": "string"
},
"image5": {
"description": "Filename of the fifth image",
"type": "string"
},
"link5": {
"description": "Wiki page to link to for the fifth item",
"type": "string"
},
"caption5": {
"description": "Caption text for the fifth item",
"type": "string"
},
"image6": {
"description": "Filename of the sixth image",
"type": "string"
},
"link6": {
"description": "Wiki page to link to for the sixth item",
"type": "string"
},
"caption6": {
"description": "Caption text for the sixth item",
"type": "string"
},
"image7": {
"description": "Filename of the seventh image",
"type": "string"
},
"link7": {
"description": "Wiki page to link to for the seventh item",
"type": "string"
},
"caption7": {
"description": "Caption text for the seventh item",
"type": "string"
},
"image8": {
"description": "Filename of the eighth image",
"type": "string"
},
"link8": {
"description": "Wiki page to link to for the eighth item",
"type": "string"
},
"caption8": {
"description": "Caption text for the eighth item",
"type": "string"
},
"image9": {
"description": "Filename of the ninth image",
"type": "string"
},
"link9": {
"description": "Wiki page to link to for the ninth item",
"type": "string"
},
"caption9": {
"description": "Caption text for the ninth item",
"type": "string"
},
"image10": {
"description": "Filename of the tenth image",
"type": "string"
},
"link10": {
"description": "Wiki page to link to for the tenth item",
"type": "string"
},
"caption10": {
"description": "Caption text for the tenth item",
"type": "string"
}
}
}
</templatedata>
</noinclude>

Template:DW/Flexbox - Revision history

imported>AFloofyDoggo: /* Usage */