Template
Card2
From Dogcraft Wiki
No edit summary |
mNo edit summary Tag: Reverted |
||
| Line 2: | Line 2: | ||
class="wiki-card {{#if: {{{cover|}}}|card-cover|}} {{#if: {{{overflow|}}}|card-overflow|}} {{#if: {{{title|}}}||card-img-only}}" | class="wiki-card {{#if: {{{cover|}}}|card-cover|}} {{#if: {{{overflow|}}}|card-overflow|}} {{#if: {{{title|}}}||card-img-only}}" | ||
style="width:{{{width|120px}}}; | style="width:{{{width|120px}}}; | ||
font-size:{{#if: {{{image-height|}}}|calc({{{image-height|}}} / 5)|calc({{{width|120px}}} / 7.5)}};">[[File:{{{file|File missing}}}|frameless|{{{width|300px}}}|{{{title|}}}|link={{{link|#}}}]] {{#if:{{{title|}}}|[[{{{link|#}}}|{{{title| }}}]]}}</div></includeonly><noinclude><!-- | font-size:{{#if: {{{image-height|}}}|calc({{{image-height|}}} / 5)|{{#if: {{{dynamic-img|1}}}|calc({{{width|120px}}} / 7.5)|16}}}};">[[File:{{{file|File missing}}}|frameless|{{{width|300px}}}|{{{title|}}}|link={{{link|#}}}]] {{#if:{{{title|}}}|[[{{{link|#}}}|{{{title| }}}]]}}</div></includeonly><noinclude><!-- | ||
Note: The image-height property uses a CSS hack: | Note: The image-height property uses a CSS hack: | ||
| Line 154: | Line 154: | ||
"default": "#", | "default": "#", | ||
"required": true | "required": true | ||
}, | |||
"dynamic-img": { | |||
"label": "Trigger: Dynamic Image", | |||
"description": "If set to false, image height will always be 80px or is using cover mode, whatever is specified for image-height.", | |||
"example": "true or false", | |||
"type": "boolean", | |||
"default": "true" | |||
} | } | ||
}, | }, | ||
| Line 164: | Line 171: | ||
"overflow", | "overflow", | ||
"cover", | "cover", | ||
"dynamic-img", | |||
"image-height" | "image-height" | ||
], | ], | ||
Revision as of 00:51, 29 June 2023
|
This template uses TemplateStyles: |
This template has no relation to Template:Card.
Card template (dogcraft.net styled)
This is an interface template for creating a link card in the style of the main dogcraft.net website. Please check the template parameters before use!
Examples
Default
Using overflow mode
Using cover mode
In a flexbox, using cover mode
Template data
Note: The image-height parameter uses a CSS hack, check implementation comments.
A lightweight link card in the style of the main dogcraft.net website
| Parameter | Description | Type | Status | |
|---|---|---|---|---|
| File | file | The name of the image to be displayed
| File | required |
| Link | link | Target page
| Page name | required |
| Title | title | The text to be displayed
| String | suggested |
| Width | width | Card width
| String | optional |
| Trigger: Overflow | overflow | Decides whether the title can wrap to multiple lines
| Boolean | optional |
| Trigger: Cover | cover | Decides whether the image covers the entire available area (useful for screenshots) or remains in the center (useful for icons)
| Boolean | optional |
| Trigger: Dynamic Image | dynamic-img | If set to false, image height will always be 80px or is using cover mode, whatever is specified for image-height.
| Boolean | optional |
| Image height (requires cover mode) | image-height | Sets the height of the image, in pixels (only has effect on cover mode!)
| Number | optional |
